Angular services not updating controllers [duplicate] - angularjs

Question

This question already has answers here:
AngularJS : How to watch service variables?
(21 answers)
Closed 5 years ago.
I am working with controllers and services in angular. It was my understanding that in the scenario of sharing date through a service between controllers that it is my responsibility to update the service since it doesn't have scope. I set a watch on the input fields and updated the service when the input changed. Why is the service in the other controller not getting updated? It is a singleton and has one instance..shouldn't the reference in the other controller be updated? The only solution I have found is to add a watch to listen for changes on the service and model but now I have two watch functions per controller to listen both ways. Is this correct? I feel that if I update the service the value should get updated in the other controller because everything is pointing to the same value.
https://jsfiddle.net/86hry8a5/
<div ng-controller="mainController as mainCtrl">
<div>
<input type="text" ng-model="mainCtrl.message" />
</div>
<div>
{{mainCtrl.message}}
</div>
</div>
<hr/>
<div ng-controller="secondController as secondCtrl">
<div>
<input type="text" ng-model="secondCtrl.message" />
</div>
<div>
{{secondCtrl.message}}
</div>
</div>
.controller('mainController', function(mainService, $scope){
var self = this;
self.message = mainService.message;
$scope.$watch(function(){return mainService.message}, function(){
self.message = mainService.message;
});
$scope.$watch(function(){return self.message}, function(){
mainService.message = self.message;
});
})
.controller('secondController', function(mainService, $scope){
var self = this;
self.message = mainService.message;
$scope.$watch(function(){return mainService.message}, function(){
self.message = mainService.message;
});
$scope.$watch(function(){return self.message}, function(){
mainService.message = self.message;
});
})
.service('mainService', function(){
var self = this;
self.message = 'service';
}
);

Answer 1

Updating the value in the service will not automatically update the value in the second controller since the second controller is not 'watching' for changes to the service's value.
In order to achieve what you are looking for, you will have to create your own 'watch' just like you have already done.
But, a better way to do this would be to emit events. Each controller will emit an event when it updates the value in the service. The other controller will listen to this event and update it's local copy.
use ng-change on the input box like this:
<input type="text" ng-model="mainCtrl.message" ng-change="mainCtrl.changeHandler()" />
Controller code in both controllers that emits and subscribes to events:
self.changeHandler = function () {
mainService.message = self.message;
$rootScope.$broadcast('MAIN_SERVICE_VALUE_CHANGED');
};
$rootScope.$on('MAIN_SERVICE_VALUE_CHANGED', function () {
self.message = mainService.message;
});
Here is a working fork of your fiddle updated with event logic

Answer 2

Why does this only work with reference to an object? and not just a property in the service?
References are entities that point to an object in memory. When a function returns an object reference, each controller gets the same pointer.
The contents of the object is shared by all the controllers. Changes to the contents is seen by all the controllers.
With primitives only the value is transfered. Subsequent changes are not seen by all the controllers.
See also, JavaScript Pass Object as a Reference