fix(modal): Support close animation

Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Closes angular-ui#1341

Author: chrisirhc

src/modal/modal.js

@@ -1,4 +1,4 @@
-angular.module('ui.bootstrap.modal', [])
+angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
 
 /**
  * A helper, internal data structure that acts as a map but also allows getting / removing
@@ -101,8 +101,8 @@ angular.module('ui.bootstrap.modal', [])
     };
   }])
 
-  .factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap',
-    function ($document, $compile, $rootScope, $$stackedMap) {
+  .factory('$modalStack', ['$transition', '$timeout', '$document', '$compile', '$rootScope', '$$stackedMap',
+    function ($transition, $timeout, $document, $compile, $rootScope, $$stackedMap) {
 
       var backdropjqLiteEl, backdropDomEl;
       var backdropScope = $rootScope.$new(true);
@@ -133,16 +133,34 @@ angular.module('ui.bootstrap.modal', [])
         openedWindows.remove(modalInstance);
 
         //remove window DOM element
-        modalWindow.modalDomEl.remove();
+        // Scope should be destroyed when element is removed
+        removeAfterAnimating(modalWindow.modalDomEl, modalWindow.modalScope);
 
         //remove backdrop if no longer needed
         if (backdropDomEl && backdropIndex() == -1) {
-          backdropDomEl.remove();
+          removeAfterAnimating(backdropDomEl, backdropScope);
           backdropDomEl = undefined;
         }
+      }
 
-        //destroy scope
-        modalWindow.modalScope.$destroy();
+      function removeAfterAnimating(domEl, scope) {
+        scope.$destroy();
+        domEl.removeClass('in');
+
+        var transitionEndEventName = $transition.transitionEndEventName;
+        if (transitionEndEventName) {
+          // transition out
+          var timeout = $timeout(function () {
+            domEl.remove();
+          }, 500);
+
+          domEl.bind(transitionEndEventName, function () {
+            $timeout.cancel(timeout);
+            domEl.remove();
+          });
+        } else {
+          domEl.remove();
+        }
       }
 
       $document.bind('keydown', function (evt) {

src/modal/test/modal.spec.js

@@ -103,6 +103,7 @@ describe('$modal', function () {
 
   function dismiss(modal, reason) {
     modal.dismiss(reason);
+    $timeout.flush();
     $rootScope.$digest();
   }
 
@@ -143,6 +144,7 @@ describe('$modal', function () {
       expect($document).toHaveModalsOpen(1);
 
       triggerKeyDown($document, 27);
+      $timeout.flush();
       $rootScope.$digest();
 
       expect($document).toHaveModalsOpen(0);
@@ -154,6 +156,7 @@ describe('$modal', function () {
       expect($document).toHaveModalsOpen(1);
 
       $document.find('body > div.modal-backdrop').click();
+      $timeout.flush();
       $rootScope.$digest();
 
       expect($document).toHaveModalsOpen(0);