angularjs referencing service getter from controller - angularjs

Question

My Angularjs project needs a service to supply a toggling boolean to other services.
Ideally, there could be an $interval() loop inside the service (but I think it would not work like that).
I created a service with s simple setter and getter:
app.service('metro', function() {
this.setFlagValue = function(flagValue){
this.flagValue = flagValue;
}
this.getFlagValue = function(){
return this.flagValue;
}
});
A global controller toggles a boolean property in an $interval() loop
function GlobalCtrl( $scope , $interval , metro ) {
var th = this;
$interval(function () {
th.pulse = !th.pulse;
metro.setFlagValue( th.pulse );
}, 1000 );
}
As seen in this plunker the global controller's boolean is toggling, I just can't see if that controller is updating the model in the service.
I must have authored something wrong, I just can't see it.
Hope someone can help

Answer 1

In your ViewCtrl, When you are getting
th.pulse = metro.getFlagValue() ;
You will be getting a boolean value for first time(lets suppose it to be true) .From next time , angular will run digest cycle and check if th.pulse is changed.(It doesnt again execute function 'metro.getFlagValue()').
Since th.pulse references a value and it is not changed , It doesnt refresh in view.
Now I have changed your code to make metro.getFlagValue() return an object , when Digest cycle runs again, it checks what th.pulse has and since it contains object refrenece created in service, it goes and checks whether the object has changed.
Now the digest cycle will update as the object is indeed changed.
and view will be updated
I have included scripts which i changed to make it run
app.service('metro', function() {
this.flagValue = {value: false}
this.setFlagValue = function(flagValue){
this.flagValue.value = flagValue;
}
this.getFlagValue = function(){
return this.flagValue;
}
});
function GlobalCtrl( $scope , $interval , metro ) {
var th = this;
$interval(function () {
th.pulse = !th.pulse;
metro.setFlagValue( th.pulse );
}, 1000 );
}
function ViewCtrl( $scope , metro ) {
var th = this;
th.pulse = metro.getFlagValue() ;
}
<div ng-app="myApp" ng-controller="GlobalCtrl as gc" class="gc">
<p>Global Controller property: {{gc.pulse}}</p>
<div ng-controller="ViewCtrl as vc" class="vc">
<p>Reference to Global Controller property: {{gc.pulse}}</p>
<p>View Controller property [referencing service] : {{ vc.pulse.value }}</p>
</div>
</div>