AngularJS Share data between Controllers when variable is set on another Controller - angularjs

Question

I need to share data between two controller (controller A and controller B). I have a service in place to share the data. This works and controllerB can see the value that controllerA sets if I'm setting the value of the shared variable using "ng-model=shared.id" from the view, however; if I set the shared variable inside of the controllerA, then controllerB doesn't see it.
app['controller']('controllerA', ['shared', function(shared){
//ControllerB will not see this for some reason, unless I set
//the value from the view using the ng-model=shared.id attribute.
shared['id'] = "123";
}]);
app['controller']('controllerB', ['shared', function(shared){
this['someId'] = shared['id'];
}]);

Answer 1

Your code will change the service value without any issues. But the issue is controllerB won't be aware of the value change as there is no $digest cycle called.
When you change the value of $scope model, $digest loop will fire and the change carried forward to controllerB.
You can try as below,
app['controller']('controllerA', ['$scope', 'shared', function($scope, shared){
$scope.shared = shared;
//ControllerB will not see this for some reason, unless I set
//the value from the view using the ng-model=shared.id attribute.
$scope.shared['id'] = "123"; // This will trigger the $digest cycle
}]);
app['controller']('controllerB', ['shared', function(shared){
this['someId'] = shared['id'];
}]);

Answer 2

When the shared data is updated in the service object from one Controller the other Controller cannot know it automatically, there has to be some way to convey such as "Hey, I've updated the shared data if anybody is using it please go ahead and fetch the updated data", this can be done using events in AngularJS by using $broadcast, $on, $emit functions on the $scope object and on the $rootScope service.
Check the below example using $broadcast function on the $rootScope to invoke an event (such as the shared id got changed) on all the child scopes (i.e. broadcast will send a message to all the child scopes), the child scopes interested in an event will listen for that event using the $on function.
angular
.module('demo', [])
.controller('ControllerA', ControllerA)
.controller('ControllerB', ControllerB)
.factory('shared', shared);
ControllerA.$inject = ['$rootScope', 'shared'];
function ControllerA($rootScope, shared) {
var vm = this;
shared.id = 123;
vm.id = shared.id;
vm.updateId = updateId;
function updateId(id) {
shared.id = id;
$rootScope.$broadcast('idChanged');
}
}
ControllerB.$inject = ['$scope', 'shared'];
function ControllerB($scope, shared) {
var vm = this;
vm.id = shared.id;
$scope.$on('idChanged', idChanged);
function idChanged(event) {
vm.id = shared.id;
}
}
function shared() {
var service = {
id: 0
};
return service;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="ControllerA as ctrlA">
Controller A: {{ctrlA.id}}
<input type="text" name="id" ng-model="ctrlA.id" ng-change="ctrlA.updateId(ctrlA.id)" />
</div>
<div ng-controller="ControllerB as ctrlB">
Controller B: {{ctrlB.id}}
</div>
</div>