one way is to watch also service value, not just scope variable
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', function($scope, voipService) {
$scope.speakerVolume = voipService.speakerVolume;
$scope.$watch("speakerVolume", function (newValue) {
voipService.speakerVolume = newValue;
});
$scope.$watch(function() {
return voipService.speakerVolume;
}, function (newValue) {
$scope.speakerVolume = newValue;
});
});
myApp.controller('SecondCtrl', function($scope, voipService) {
$scope.speakerVolume = voipService.speakerVolume;
$scope.$watch("speakerVolume", function (newValue) {
voipService.setVolume(newValue);
});
$scope.$watch(function(){
return voipService.speakerVolume;
}, function (newValue) {
$scope.speakerVolume = newValue;
});
});
myApp.service('voipService', function() {
var self = this;
this.speakerVolume = 50;
this.setVolume = function(newVal){
self.speakerVolume = newVal;
}
});
second way is to use $broadcast
in the service (when the value is changed) and update values in all controllers when this custom event is fired