Directive does not update on service model change - angularjs

Question

I have a service that contains my application's model:
angular.module('adminClient').factory('myApi', function () {
var model = {};
model.myObject = {
label: 'New York City'
};
return {
model: function () {
return model;
}
};
});
A partial/controller has access to the model and can set a new myObject:
angular.module('adminClient').controller('MySelectNetworkCtrl', function ($scope, myApi) {
$scope.myObject = myApi.model().myObject;
});
In addition to this, I have a directive that should display the label contained in myObject:
angular.module('nav').directive('myTopBar', function(myApi) {
return {
restrict: 'E',
replace: true,
scope: {},
templateUrl: 'nav/directive/my-top-bar/my-top-bar.html',
link: function(scope, element, attrs, fn) {
scope.myObject = myApi.model().myObject;
}
};
});
And here is the HTML:
<div id="my-top-bar">
<span ng-bind="myObject"></span>
</div>
When I run the application, the label is displayed fine (New York City), but as soon as the controller changes the myObject, the label in the directive remains unchanged. I can also see this in the Chrome Angular scope inspector.
Any idea how I can make the directive display the current value even after changed by the controller?

Answer 1

It all depends upon how the controller is updating the model object. Since your code
scope.myObject = myApi.model().myObject;
gets hold of this specific model object it works fine as long as model object myObject properties are changed.
But if the controller does
myApi.model().myObject= {}; //or any new object
Now the model returned by service has different myObject and the directive one is different. Therefore changes do not work.
Instead in directive do:
scope.myObject = myApi.model(); // bind to model
And update the bindings in the directive template accordingly. See if it works

Answer 2

Check this plunkr
If you want to modify your myObject inside your controller, and also want this change to be reflected inside your my-top-bar directive which then updates the directive's scope from myApi service, then you should do it like this.
Update the myObject in your controller and then also update it in your service through a setter method.
// Doing this will update your scope.myObject but
// will not change the moObject in your service
$scope.myObject = {
label: 'updated label'
};
// This will update your service, and anyone making a myApi.myApi.model() after this will get an updated myObject
myApi.setModel($scope.myObject);
// Notify directive of the change
$scope.$broadcast('updateDirective');
And in the factory:
angular.module('plunker').factory('myApi', function() {
var model = {};
model.myObject = {
label: 'New York City'
};
return {
model: function() {
return model;
},
setModel: function(newModel) {
model.myObject = newModel;
}
};
});
Finally, the directive:
angular.module('plunker').directive('myTopBar', function(myApi) {
return {
restrict: 'E',
replace: true,
scope: {},
templateUrl: 'top-bar.html',
link: function(scope, element, attrs, fn) {
console.log('in directive link', myApi.model().myObject);
scope.myObject = myApi.model().myObject;
},
controller: function($scope) {
$scope.$on('updateDirective', function() {
console.log('updating the scope of directive so that ng-bind works');
$scope.$apply(function() {
$scope.myObject = myApi.model().myObject;
console.log($scope.myObject);
});
});
}
};
});