javascript - AngularJS controller function not firing -

i have 3 directives, "parenta", "parentb", , "childb". "parenta" , "parentb" siblings, while "childb" direct child of "parentb".

i trying call controller method "parenta", not working. strange reason, trying call method on "childb" controller "parenta" working instead. happening?

var mod = angular.module("app", []);  mod.directive("parenta", function () {     return {         template: "<section><div ng-click='vm.a()'>rendered a</div></section>",         replace: false,         controlleras: "vm",         controller: function () {             this.a = function () {                 console.log("a called!");             }         }     } })  mod.directive("parentb", function () {     return {         template: "<childb></childb>",         replace: false     } })  mod.directive("childb", function () {     return {         template: "<section><div ng-click='vm.b()'>rendered b</div></section>",         replace: false,         controlleras: "vm",         controller: function () {             this.b = function () {                 console.log("b called!");             }         }     } }) 

html:

<div ng-app="app">     <parenta></parenta>     <parentb></parentb> </div> 

codepen: http://codepen.io/anon/pen/pjmpve

the issue here directives not create child or isolate scope , use scope: false (which default).

that means given scope, each directive aliased controller, create scope property called vm - both on same scope. , so, childb overwrites vm property created parenta.

you can check quite - change 1 of controlleras aliases else.

an easy fix - , right thing - use either scope: true or scope: {}.