Struggling to grasp why modifications to an ngModel don't transfer between directives. Take a look at this plunker for a simplified example of the issue.
Essentially, there's a directive I've defined that utilizes ngModel with an isolate scope:
.directive('echo', function() {
var link = function(scope, element, attrs, ngModel) {
// --- 8< ---
scope.$watch(attrs['ngModel'], function() {
scope.model = ngModel.$modelValue;
console.log("***** Echo model updated: ", scope.model);
});
};
return {
restrict: 'E',
require: 'ngModel',
link: link,
scope: {
id: "="
}
}
})
This directive is then enclosed within another directive, which also depends on ngModel and has an isolate scope:
.directive('wrapper', function() {
var link = function(scope, element, attrs, ngModel) {
scope.$watch(attrs['ngModel'], function() {
var model = ngModel.$modelValue;
console.log("----- Wrapper model updated", model);
scope.model = model;
})
};
return {
restrict: 'E',
require: 'ngModel',
link: link,
scope: {
},
template: "<div><h2>Echo:</h2> <echo id='myEcho' ng-model='model'></echo></div><div><h2>Model text:</h2>{{ model.text }}</div>"
}
})
The "wrapper" directive requires an ngModel, just like the echo directive.
After using the "wrapper" directive in my HTML and updating the ngModel value, the "wrapper" directive correctly detects changes (as shown in the console.log). However, at this point, the wrapper directive updates the model on its scope, which should theoretically pass that update onto the "echo" directive.
Yet, upon monitoring the console, the "echo" directive doesn't pick up on the model update.
Q: What prevents the "echo" directive from recognizing the updated model from the "wrapper" directive?
Note: The situation may be slightly complicated by the fact that the "echo" is sometimes accessed directly, not solely through the "wrapper" directive.