title: AngularJS - Calling a callback function with directive?
body: <p>I cannot figure out why my directive is not calling my callback function from my parent page. Can you please assist?</p>
  
  <p>Angular code:</p>
  
  <pre><code>    angular
          .module('myApp')
          .directive('testDirective', function () {
              return {
                  bindToController: {
                      foo: '@',
                      myCallback: '&amp;'
                  },
                  controller: function () {
                  },
                  controllerAs: 'vm',
                  restrict: 'E',
                  replace: true,
                  scope: {},
                  template: '&lt;div&gt;Foo is: {{ vm.foo }} &lt;button data-ng-click="vm.myCallback()"&gt;Click to call Callback&lt;/button&gt;&lt;/div&gt;'
              };
          });
  
      angular
          .module('myApp')
          .controller('ParentController', function () {
              this.myParentCallback = function () {
                  alert('Called the parent callback function');
              };
          });
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-ng-app="myApp" data-ng-controller="ParentController as ctrl"&gt;
          &lt;test-directive foo="bar!" my-callback="ctrl.myParentCallBack"&gt;&lt;/test-directive&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see, <code>foo</code> binds correctly, but I can't get <code>myCallback</code> to work...</p>
  
  <p>Thoughts?</p>
  
  <p>Here it is in plnkr: (<a href="http://plnkr.co/edit/niVL5iAeOJ6XTpkpL9fu?p=preview" rel="nofollow">http://plnkr.co/edit/niVL5iAeOJ6XTpkpL9fu?p=preview</a>)</p>