title: Angular Bootstrap Modal leaves backdrop open
body: <p>I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals. </p>
  
  <p>I'm calling a Modal in my controller like so:</p>
  
  <pre><code>var modalInstance = $modal.open({
    animation: true,
    templateUrl: '/static/templates/support-report-modal.html',
    controller: 'ModalInstanceCtrl'
  });
  </code></pre>
  
  <p>Unfortunately, when I want to close the Modal by using:</p>
  
  <pre><code>modalInstance.close();
  </code></pre>
  
  <p>The modal itself dissapears, and the backdrop also fades out, but it isn't removed from the DOM, so it overlays the whole page leaving the page unresponsive.</p>
  
  <p>When I inspect, I'm seeing this:</p>
  
  <p><img src="https://i.stack.imgur.com/ilNmE.png" alt="enter image description here"></p>
  
  <p>In the example in the Documentation on <a href="https://angular-ui.github.io/bootstrap/#/modal" rel="noreferrer">https://angular-ui.github.io/bootstrap/#/modal</a> The class <code>modal-open</code> is removed from body and the whole <code>modal-backdrop</code>is removed from the DOM on close. 
  Why is the Modal fading out but the backdrop not removed from the DOM in my example?</p>
  
  <p>I've checked out many of the other questions about the backdrop of bootstrap Modals but I can't seem to figure out what's going wrong.</p>