fix(interimElement): show method should cancel existing interim element

* Currently the interimElement factory always `hides` the existing interim element, if present.
  This is no correct, because the interimElement should either cancel the previous existing interim element,
  otherwise the interimElement service will resolve the deferred promise with `undefined`, instead of rejecting properly.

Fixes  #8533.

Closes #8600

src/components/dialog/dialog.spec.js

@@ -634,13 +634,49 @@ describe('$mdDialog', function() {
           .parent(parent)
           .textContent('Hello world')
           .placeholder('placeholder text')
-      )
+      );
 
       runAnimation(parent.find('md-dialog'));
 
       expect($document.activeElement).toBe(parent[0].querySelector('input'));
     }));
 
+    it('should cancel the first dialog when opening a second', inject(function($mdDialog, $rootScope, $document) {
+      var firstParent = angular.element('<div>');
+      var secondParent = angular.element('<div>');
+      var isCancelled = false;
+
+      $mdDialog.show(
+        $mdDialog
+          .prompt()
+          .parent(firstParent)
+          .textContent('Hello world')
+          .placeholder('placeholder text')
+      ).catch(function() {
+        isCancelled = true;
+      });
+
+      $rootScope.$apply();
+      runAnimation();
+
+      expect(firstParent.find('md-dialog').length).toBe(1);
+
+      $mdDialog.show(
+        $mdDialog
+          .prompt()
+          .parent(secondParent)
+          .textContent('Hello world')
+          .placeholder('placeholder text')
+      );
+
+      $rootScope.$apply();
+      runAnimation();
+
+      expect(firstParent.find('md-dialog').length).toBe(0);
+      expect(secondParent.find('md-dialog').length).toBe(1);
+      expect(isCancelled).toBe(true);
+    }));
+
     it('should submit after ENTER key', inject(function($mdDialog, $rootScope, $timeout, $mdConstant) {
       jasmine.mockElementFocus(this);
       var parent = angular.element('<div>');

src/core/services/interimElement/interimElement.js

@@ -286,7 +286,10 @@ function InterimElementProvider() {
       function show(options) {
         options = options || {};
         var interimElement = new InterimElement(options || {});
-        var hideExisting = !options.skipHide && stack.length ? service.hide() : $q.when(true);
+        // When an interim element is currently showing, we have to cancel it.
+        // Just hiding it, will resolve the InterimElement's promise, the promise should be
+        // rejected instead.
+        var hideExisting = !options.skipHide && stack.length ? service.cancel() : $q.when(true);
 
         // This hide()s only the current interim element before showing the next, new one
         // NOTE: this is not reversible (e.g. interim elements are not stackable)

src/core/services/interimElement/interimElement.spec.js

@@ -342,6 +342,24 @@ describe('$$interimElement service', function() {
 
       }));
 
+      it('should cancel a previous shown interim element', inject(function() {
+        var isCancelled = false;
+
+        Service.show({
+          template: '<div>First Interim</div>'
+        }).catch(function() {
+          isCancelled = true;
+        });
+
+        // Once we show the second interim, the first interim should be cancelled and the promise
+        // should be rejected with no reason.
+        Service.show({
+          template: '<div>Second Interim</div>'
+        });
+
+        expect(isCancelled).toBe(true);
+      }));
+
       it('forwards options to $mdCompiler', inject(function() {
         var options = {template: '<testing />'};
         Service.show(options);