title: Angular Bootstrap multiple modal backdrops
body: <p>I'm using <a href="https://github.com/dwmkerr/angular-modal-service" rel="nofollow noreferrer">this</a> modal service to show a basic dialog in an Angular app.</p>
  
  <p>The implementation is simple but there are two issues:</p>
  
  <ol>
  <li>The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/SFcGp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SFcGp.png" alt="enter image description here"></a></p>
  
  <ol start="2">
  <li>When closing the dialog, the form closes but the background remains, leaving the view useless. I'm sure this is related to 1.</li>
  </ol>
  
  <p>I'm using Angular 1.4.9 with angular-ui-bootstrap 0.13.4 [2015-09-03]. I've found a couple of <a href="https://stackoverflow.com/questions/30191375/angular-bootstrap-modal-leaves-backdrop-open">posts</a> showing incompatibilities between angular 1.4 and angular-ui-bootstrap but I've not managed to solve this.</p>
  
  <p>Edit - view and controller code:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-sm btn-white" ng-click="procFileCtrl.viewErrors(file)"&gt; &lt;i class="fa fa-eye"&gt;&lt;/i&gt; &lt;/button&gt;
  
  this.viewErrors = function(file) {
          ModalService.showModal({
              templateUrl: 'modules/components/client/modal/modal-base.html',
              controller: 'FileController',
              controllerAs: 'fileCtrl',
              inputs: { 
                  data: file 
              }
          }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
              this.message = result ? 'ok' : 'notok';
            });
          }).catch(function(error) {
            console.log(error);
          });
      };
  </code></pre>
  
  <p>modal-base.html</p>
  
  <pre><code> &lt;div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content animated bounceInRight"&gt;
          &lt;div class="modal-header"&gt;
              &lt;!-- header here --&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;!-- body here --&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-white" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>