title: AngularJS Material using $mdDialog in a directive linking function
body: <p>I am trying to put an <a href="https://material.angularjs.org/latest/#/api/material.components.dialog/service/$mdDialog" rel="nofollow">Angular Material dialog</a> in a directive's linking function. Conceptually, I'm not seeing why this would not be possible. As per the docs, the <code>$mdDialog.show</code> is on a scope and <code>$mdDialog.hide();</code> rests in a controller defined by the <code>$mdDialog.show</code> object. I've been able to get the dialog to popup—and though <code>closeModal()</code> executes (I can tell by the console.log), <code>$mdDialog.hide()</code> never executes and the modal never hides. </p>
  
  <pre><code>angular.module('app', ['ngMaterial'])
      .directive('addLayer', ['$mdDialog', function($mdDialog) {
  
          return {
  
              template: '&lt;h1 ng-click="openDialog()"&gt;Open Dialog&lt;/h1&gt;&lt;div&gt;alert: {{alert}}&lt;/div&gt;',
              scope: {},
              link: function(scope) {
  
                  scope.alert = '';
                  scope.addLayerDialog = function() {
  
                      $mdDialog.show({
  
                          parent: angular.element(document.body),
                          templateUrl: {...},
                          controller: function($scope, $mdDialog) {
  
                              $scope.hide = function() {
                                  $mdDialog.hide();
  
                              };
  
                              $scope.cancel = function() {
  
                                  $mdDialog.cancel();
  
                              };
  
                              $scope.answer = function(answer) {
                                  console.log($mdDialog.hide('answer'));
                                  $mdDialog.hide(answer);
  
                              };
                          }
  
                      }).then(function(answer) {
  
                          scope.alert = 'You said the information was "' + answer + '".';
  
                      }, function() {
  
                          scope.alert = 'You cancelled the dialog.';
  
                      });
  
                  };
  
              }
  
          };
      }]);
  </code></pre>
  
  <p>Why is this not working? Is it simply not possible to define a <code>mdDialog</code> modal from within a directive?</p>
  
  <p>Here is a Plnkr I've been tinkering with:</p>
  
  <p><a href="http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview" rel="nofollow">http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview</a></p>
  
  <p>Thanks a bunch. This has driving me nuts for several hours. </p>