title: Calling directive's methods from parent controller in AngularJS
body: <p>I am using <strong>AngularJS</strong> with the alias controllers pattern. I can't access (or I don't know how to) directive methods from a parent controller. </p>
  
  <p>I have a function inside my controller that should call a directive method but this directive method is not available inside the <code>this</code> controller value.</p>
  
  <p>This is what I have. What I am doing wrong?</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('myApp', []).
  
  controller('MyCtrl', function(){
    this.text = 'Controller text';
  
    this.dirText = 'Directive text';
  
    this.click = function(){
      this.changeText();
    }
  })
  
  .directive('myDir', function(){
    return {
       restrict: 'E',
       scope: {
         text: '='
       },
       link: function(scope, element, attrs){
         scope.changeText = function(){
           scope.text = 'New directive text';
         };
       },
       template: '&lt;h2&gt;{{text}}&lt;/h2&gt;'
    };
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div ng-controller="MyCtrl as ctrl"&gt;
      &lt;h1&gt;{{ctrl.text}}&lt;/h1&gt;
      &lt;my-dir text="ctrl.dirText"&gt;&lt;/my-dir&gt;
      &lt;button ng-click="ctrl.click()"&gt;Change Directive Text&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://codepen.io/ianaya89/pen/mywWep">Here</a> a codepen with the code.</p>