title: Call controller function from directive template in AngularJS
body: <p>I've found plenty examples of calling controller function from directive however couldn't find an example of calling it from directive template.</p>
  
  <p>Let's say I've got this HTML code to open modal directive</p>
  
  <pre><code>        &lt;button ng-click='toggleModal()'&gt;Open&lt;/button&gt;
          &lt;modal-dialog show='modalShown' confirm="confirmCtrl()"&gt;
              &lt;p&gt;Modal Content Goes here&lt;p&gt;
          &lt;/modal-dialog&gt;
  </code></pre>
  
  <p>Here's my controller with a function confirmCtrl() I want to call:</p>
  
  <pre><code>myApp.controller('myController', function($scope){
   $scope.modalShown = false;
   $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
  $scope.confirmCtrl = function () {
      alert('confirmed');
  }
  </code></pre>
  
  <p>})</p>
  
  <p>And here's my directive. I</p>
  
  <pre><code>.directive('modalDialog', function(){
       return {
          restrict: 'E',
          scope: {
              show: '=',
              corfirm: '&amp;'
          },
          replace: true, 
          transclude: true, 
          link: function(scope, element, attrs) {
              scope.hideModal = function() {
              scope.show = false;
          };
       },
  template: "&lt;div class='ng-modal' ng-show='show'&gt;&lt;div class='ng-modal-overlay' ng-click='hideModal()'&gt;&lt;/div&gt;&lt;div class='ng-modal-dialog' ng-style='dialogStyle'&gt;&lt;div class='ng-modal-close' ng-click='hideModal()'&gt;X&lt;/div&gt;&lt;div class='ng-modal-dialog-content' ng-transclude&gt;&lt;/div&gt;&lt;button ng-click=""&gt; Confirm &lt;/button&gt;&lt;/div&gt;&lt;/div&gt;"
  </code></pre>
  
  <p>};</p>
  
  <p>In my template, I've got a button and I want to call confirmCtrl() function on click, however, couldn't grasp how to do it</p>
  
  <p>Here's a working fiddle <a href="http://jsfiddle.net/anao4nsw/" rel="noreferrer">http://jsfiddle.net/anao4nsw/</a> </p>