fix(dropdown): call toggle after animation

- Change to call toggle after animation completes

Closes #3513
Closes #3655
Fixes #3511

Author: Sneha Jain

Diff for: src/dropdown/dropdown.js

@@ -171,7 +171,11 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       });
     }
 
-    $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);
+    $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass).then(function() {
+        if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
+           toggleInvoker($scope, { open: !!isOpen });
+        }
+    });
 
     if ( isOpen ) {
       if (self.dropdownMenuTemplateUrl) {
@@ -202,9 +206,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     }
 
     setIsOpen($scope, isOpen);
-    if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
-      toggleInvoker($scope, { open: !!isOpen });
-    }
   });
 
   $scope.$on('$locationChangeSuccess', function() {

Diff for: src/dropdown/test/dropdown.spec.js

@@ -1,14 +1,15 @@
 describe('dropdownToggle', function() {
-  var $compile, $rootScope, $document, $templateCache, dropdownConfig, element;
+  var $compile, $rootScope, $document, $templateCache, dropdownConfig, element, $browser;
 
   beforeEach(module('ui.bootstrap.dropdown'));
 
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_, _$browser_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $document = _$document_;
     $templateCache = _$templateCache_;
     dropdownConfig = _dropdownConfig_;
+    $browser = _$browser_;
   }));
 
   afterEach(function() {
@@ -322,9 +323,11 @@ describe('dropdownToggle', function() {
     it('should call it correctly when toggles', function() {
       $rootScope.isopen = true;
       $rootScope.$digest();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
 
       clickDropdownToggle();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
     });
   });
@@ -338,16 +341,19 @@ describe('dropdownToggle', function() {
     });
 
     it('should not have been called initially', function() {
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).not.toHaveBeenCalled();
     });
 
     it('should call it correctly when toggles', function() {
       $rootScope.isopen = false;
       $rootScope.$digest();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
 
       $rootScope.isopen = true;
       $rootScope.$digest();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
     });
   });
@@ -360,14 +366,17 @@ describe('dropdownToggle', function() {
     });
 
     it('should not have been called initially', function() {
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).not.toHaveBeenCalled();
     });
 
     it('should call it when clicked', function() {
       clickDropdownToggle();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(true);
 
       clickDropdownToggle();
+      $browser.defer.flush();
       expect($rootScope.toggleHandler).toHaveBeenCalledWith(false);
     });
   });