[angularjs] AngularJs directive not updating another directive's scope

I have a parent directive that has a function that loads a modal div with data after a service call. I have confirmed that the service correctly returns data, but that data model is never passed to the child directive's scope through the template.

Notice below that the parentDirective's scope.warrantymodel is set by the loadModal function. Also notice that in the parent template, the "warrantymodel" should be mapped to the warrantyDirective's "model".

I've debugged through the code with chrome debugger and batarang, but the scope.$watch('model'...) call fires on page load but never fires after the button click loads the data. I even tried the deep watch switch in the scope.$watch call (i.e. the "true" value).

app.directive('parentDirective', ["myService", function(myService){    return {       scope:{           warranty: '=',           ocode: '='         },         restrict: 'EA',         templateUrl: '/content/templates/parent.html',         link: function(scope){         scope.loadModal = function ($event) {             //TODO: this gets data but it doesnt bind to the modal's model             scope.warrantymodel =                    myService.getDataStuff(scope.warranty, scope.ocode);     }; 

This is the child directive that should get the model:

app.directive('warrantyDirective', [function () {     return {         scope: {             model: '='         },         restrict: 'EA',         templateUrl: '/content/templates/warranty.html',         link: function(scope) {             scope.$watch('model', function (newValue, oldValue) {                          // this alert never fires after page load                          // I have verified that the newValue has a value                           // and is different than the original value                           // (original value is undefined on page load)                           alert("$watch model = " + newValue);                            // do dom manipulation and other stuff                       }, true); 

The parent's template calls the warranty modal's directive like this:

<a data-ng-if="warranty" data-loading-text="Please wait..."      data-ng-click="loadModal($event)">{{ptext}}</a>  <div data-ng-if="warranty">     <div warranty-directive model="warrantymodel"></div> </div> 

Any ideas what's missing or how I can troubleshoot this further?

Just wondering why you are using 2 directives?

It seems like, in this case it would be more straightforward to have a controller as the parent - handle adding the data from your service to its $scope, and pass the model you need from there into your warrantyDirective.

Or for that matter, you could use 0 directives to achieve the same result. (ie. move all functionality out of the separate directives and into a single controller).

It doesn't look like you're doing any explicit DOM transformation here, so in this case, perhaps using 2 directives is overcomplicating things.

Alternatively, have a look at the Angular documentation for directives: http://docs.angularjs.org/guide/directive The very last example at the bottom of the page explains how to wire up dependent directives.