fix(fabSpeedDial): fix $digest in-progress error when opening a dialog

cebor reported a $digest in progress bug when trying to open a dialog
from within the speed dial; haven't figured out how to create a test
that demonstrates it, but I added a demo which shows failure

references #3213

Author: topherfangio

src/components/fabSpeedDial/demoModal/index.html

@@ -0,0 +1,42 @@
+<div ng-controller="AppCtrl" layout="column">
+  <md-content class="md-padding" layout="column">
+    <p>
+      You can also use the buttons to open a dialog.
+    </p>
+
+    <div class="lock-size" layout="row" layout-align="center center">
+      <md-fab-speed-dial md-direction="down" class="md-fling">
+        <md-fab-trigger>
+          <md-button aria-label="Menu" class="md-fab md-warn">
+            <md-tooltip md-direction="top">Menu</md-tooltip>
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <md-button aria-label="Open dialog" class="md-fab md-raised md-mini"
+                     ng-click="demo.openDialog($event)">
+            <md-tooltip md-direction="left">Open dialog</md-tooltip>
+            <md-icon md-svg-src="img/icons/launch.svg"></md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+
+  <script type="text/ng-template" id="dialog.html">
+    <md-dialog>
+      <md-dialog-content>Hello User!!!</md-dialog-content>
+
+      <div class="md-actions">
+        <md-button aria-label="Close dialog" ng-click="dialog.close()" class="md-primary">
+          Close Greeting
+        </md-button>
+
+        <md-button aria-label="Submit dialog" ng-click="dialog.submit()" class="md-primary">
+          Submit
+        </md-button>
+      </div>
+    </md-dialog>
+  </script>
+</div>

src/components/fabSpeedDial/demoModal/script.js

@@ -0,0 +1,25 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialModalDemo', ['ngMaterial'])
+    .controller('AppCtrl', function($scope, $mdDialog) {
+      $scope.demo = {
+        openDialog: function($event) {
+          $mdDialog.show({
+            clickOutsideToClose: true,
+            controller: function($mdDialog) {
+              this.close = function() {
+                $mdDialog.cancel();
+              };
+              this.submit = function() {
+                $mdDialog.hide();
+              };
+            },
+            controllerAs: 'dialog',
+            templateUrl: 'dialog.html',
+            targetEvent: $event
+          });
+        }
+      };
+    });
+})();

src/components/fabSpeedDial/demoModal/style.scss

@@ -0,0 +1,16 @@
+.md-fab.md-mini {
+  background-color: #aaa !important;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+  background-color: #333 !important;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}

src/components/fabSpeedDial/fabSpeedDial.js

@@ -79,18 +79,18 @@
       // Define our open/close functions
       // Note: Used by fabTrigger and fabActions directives
       vm.open = function() {
-        vm.shouldClose = false;
-        $scope.$apply('vm.isOpen = true');
+        // Run in a timeout to avoid conflicts with existing digest loops
+        $timeout(function() {
+          vm.isOpen = true;
+        });
       };
 
       vm.close = function() {
-        vm.shouldClose = true;
-
-        // Run at the next digest to avoid very fast changes (i.e. tabbing between child items)
+        // Run in a timeout to avoid conflicts with existing digest loops
         $timeout(function() {
           // Only close if we do not currently have mouse focus (since child elements can call this)
-          !vm.moused && vm.shouldClose && $scope.$apply('vm.isOpen = false');
-        }, 0, false);
+          !vm.moused && (vm.isOpen = false);
+        });
       };
 
       vm.mouseenter = function() {

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -32,21 +32,23 @@ describe('<md-fab-speed-dial> directive', function() {
     expect(element.hasClass('md-right')).toBe(true);
   }));
 
-  it('opens when the trigger element is focused', inject(function() {
+  it('opens when the trigger element is focused', inject(function($timeout) {
     compileAndLink(
       '<md-fab-speed-dial><md-fab-trigger><button></button></md-fab-trigger></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
   }));
 
-  it('opens when the speed dial elements are focused', inject(function() {
+  it('opens when the speed dial elements are focused', inject(function($timeout) {
     compileAndLink(
       '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
   }));
 
@@ -56,6 +58,7 @@ describe('<md-fab-speed-dial> directive', function() {
     );
 
     element.find('button').triggerHandler('focus');
+    $timeout.flush();
     expect(controller.isOpen).toBe(true);
 
     element.find('button').triggerHandler('blur');