title: Angular Material - $mdDialog custom template - ng-click for function in directive?
body: <p>I've used $mdDialog.show() within a custom directive with a templateUrl property to access a custom template for the the dialog itself, in which I've included two buttons; a 'Cancel' button and a 'Confirm' button.</p>
  
  <p>For each of these I've added an ng-click with calls to 'cancelLeaver()' and 'confirmLeaver()' functions, which I need to be able to write in the directive, but have no idea how I would do.</p>
  
  <p>I've attempted to use the $mdDialog.then() functionality, but this didn't work because of having buttons in a custom view template.</p>
  
  <p>How can I call functions from a view template's ng-click attribute that are written inside a separate directive?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;md-dialog ng-controller="mainController" style="min-width: 30vw"&gt;
  
  &lt;md-dialog-content&gt;
  
      &lt;h2 class="md-title"&gt;Confirm leaver status&lt;/h2&gt;
  
  &lt;/md-dialog-content&gt;
  
  &lt;md-dialog-content class="minus-padding-top"&gt;
  
      &lt;p&gt;Enter employee's leave date below&lt;/p&gt;
  
      &lt;br&gt;
  
      &lt;md-input-container class="md-prompt-input-container"&gt;
  
          &lt;input id="leaveDate" name="leaveDate" ng-model="employee.leaveDate" ng-init="employee.leaveDate = currentDate" aria-label="Leave Date" required&gt;
  
      &lt;/md-input-container&gt;
  
  &lt;/md-dialog-content&gt;
  
  &lt;md-dialog-actions&gt;
  
      &lt;md-button ng-click="cancelLeaver()"&gt;Cancel&lt;/md-button&gt;
  
      &lt;md-button ng-click="confirmLeaver()" ng-disabled="!employee.leaveDate.length"&gt;Confirm&lt;/md-button&gt;
  
  &lt;/md-dialog-actions&gt;
  
  &lt;/md-dialog&gt;
  </code></pre>
  
  <p><strong>Directive:</strong></p>
  
  <pre><code>app.directive('makeLeaver', function($window, $mdDialog, $mdToast, $timeout, $state) {
  return {
      restrict: 'A',
      scope: {
          employee: '=',
      },
      controller: 'employeeDetailsController', 
      controllerAs: 'employeeDetails',
      bindToController: true,
      link: function(scope, element, attrs) {
          element.bind('click', function() {
  
              console.log('makeLeaver(' + '#' + scope.employee.id + ')');
  
              /* Show confirmation prompt dialog */
              $mdDialog.show({
                  parent: angular.element('body'),
                  clickOutsideToClose: true,
                  templateUrl: 'views/employees/employeeDetails/dialogs/makeLeaver.html',
                  targetEvent: element
              })
  
              /* ---------------- TRIED THIS BUT DIDN'T WORK ---------------- */
              scope.cancelLeaver = function() {
                  console.log('cancelLeaver()');
                  $mdDialog.hide();
              }
  
              scope.confirmLeaver = function() {
                  console.log('confirmlLeaver()');
              }
  
          })
      }
  }
  })
  </code></pre>