title: Bootstrap modal appearing under background in AngulaJS application
body: <p>This question might be flagged as duplicate but my issue isn't solved by the things mentioned in the relevant SO thread, here is the <a href="https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background?page=1&amp;tab=votes#tab-top">link</a> to that </p>
  
  <p>I have to make a modal with an Image into it and stack it into an existing AngularJS application. So, by far what I have done is this. When I do data-backdrop="false", the whole black tint gets removed and that's pretty obvious. But I don't want that. I want the black tint to remain there but behind the modal not stacking on top of it.</p>
  
  <p>How can I do that, without using jQuery.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;li ui-sref-active="active"&gt;
              &lt;a href="javascript:;" data-toggle="modal" data-target="#myModal"&gt;
                &lt;i class="fa fa-bullhorn" style="color: #fff200"&gt;&lt;/i&gt;
               &lt;span id="glow" style="color: #fff200"&gt;What's New&lt;/span&gt;
              &lt;/a&gt;
              &lt;div id="myModal" class="modal fade" role="dialog"&gt;
                  &lt;div class="modal-dialog modal-lg"&gt;
                    &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                        &lt;h3 class="modal-title" style="color: #000"&gt;&lt;strong&gt;New Features&lt;/strong&gt;&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                        &lt;center&gt;
                          &lt;img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive"&gt;
                        &lt;/center&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- &lt;div class="modal-footer"&gt;
                        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt; --&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
  </code></pre>