javascript - AngularJS Directive to directive communication -

i've directive nested within directive in below fiddle.

http://jsfiddle.net/sriramr/t7w6t/3/

my question is: if variable in parent directive changes value, how automatically update value of variable in child directive computed parent variable?

var myapp = angular.module('myapp',[]); myapp.directive('parentdir', parentdir);     function parentdir() {         return {             restrict:'e',             controller: function ectrl($scope) {                 $scope.parval = 100;                 $scope.$on("event",function(e,data) {                     console.log("emit")                     $scope.parval = 200;                 })              },             template:'<div><first-dir></first-dir</div>'         }     }  myapp.directive('firstdir', firstdir); function firstdir() {     return {         restrict:'e',         controller: function($scope) {             //$scope.$watch('parval',function() {                 $scope.childval = $scope.parval + 1;             //})             $scope.changeval = function() {                 $scope.$emit("event")             }         },         template:'<div>first dir: {{parval}} {{childval}} <br /> <button ng-click="changeval()">change</button></div>'     } } 

the variable parval parent directive's controller's scope gets handed down child directive's controller. child directive has own variable childval parval + 1. try change parval's value indirectly emitting event in child directive. expected, parval's value changes , reflected in view. however, childval's value not changed.

i able see updated value of childval using $watch on parval. there other way can this?

there few ways can share code between these 2 directives.

one way take advantage of how firstdir prototypically inherits parentdir. you're doing parval, had issues updating parval within child directive. easy workaround create update function in parent directive. gives access update scope directly. example: http://jsfiddle.net/t7w6t/4/
edit: don't above approach because tightly couples both directives , firstdir won't work on it's own.

another way create shared service. service in angular singleton, anywhere injected controller same instance everywhere else. can create pub/sub mechanism. sure clean subscribers when scope of subscriber destroyed. preferred way share between directives , controllers because don't pollute scope. remember, bound scope has effect on digest.

example code of minimal pub/sub mechanism:

myapp.service('sharedservice', function(){     var listeners = [];     return {         publish: function(){             angular.foreach(listeners, function(listener){                listener.call(null);              });         },         subscribe: function(fn){             listeners.push(fn);         },         unsubscribe: function(fn){             var idx = listeners.indexof(fn);             if(idx > -1){                  listeners.splice(idx,1);                }         }     } }); 

you interact parent directive so:

            var update = function(){                 $scope.parval = 200;             };              sharedservice.subscribe(update);              $scope.$on("$destroy", function(){                sharedservice.unsubscribe(update);              }); 

and child directive thing can access function publish listeners:

        $scope.updateparval = function(){             sharedservice.publish();         }; 

http://jsfiddle.net/t7w6t/5/

there's pretty explanation on whether scope inheritance or $emit better: https://stackoverflow.com/a/18179640/151445

one thing don't see mentioned service approach control subscribers , publishers bound. $scope.$emit , $scope.$on, scope can go crazy events.