title: AngularJS controller function not firing
body: <p>I have 3 directives, "parenta", "parentb", and "childb". "parenta" and "parentb" are siblings, while "childb" is a direct child of "parentb".</p>
  
  <p>I am trying to call a controller method from "parenta", however it is not working. For some strange reason, trying to call a method on "childb" controller FROM "parenta" is working instead. What is happening?</p>
  
  <pre><code>var mod = angular.module("app", []);
  
  mod.directive("parenta", function () {
      return {
          template: "&lt;section&gt;&lt;div ng-click='vm.a()'&gt;Rendered by a&lt;/div&gt;&lt;/section&gt;",
          replace: false,
          controllerAs: "vm",
          controller: function () {
              this.a = function () {
                  console.log("a called!");
              }
          }
      }
  })
  
  mod.directive("parentb", function () {
      return {
          template: "&lt;childb&gt;&lt;/childb&gt;",
          replace: false
      }
  })
  
  mod.directive("childb", function () {
      return {
          template: "&lt;section&gt;&lt;div ng-click='vm.b()'&gt;Rendered by b&lt;/div&gt;&lt;/section&gt;",
          replace: false,
          controllerAs: "vm",
          controller: function () {
              this.b = function () {
                  console.log("b called!");
              }
          }
      }
  })
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
      &lt;parenta&gt;&lt;/parenta&gt;
      &lt;parentb&gt;&lt;/parentb&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Codepen: <a href="http://codepen.io/anon/pen/pJMpVe" rel="nofollow">http://codepen.io/anon/pen/pJMpVe</a></p>