Changing a scope variable in different modules - angularjs

Question

I have variable called "name" in the $scope namespace($scope.name).
I modify this variable from different controllers and from different modules. The code is provided below:
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', []);
myModule.controller( 'MyCtrl', [ '$scope', function($scope) {
$scope.name = 'Superhero';
console.log("My module");
} ]);
myModule.controller( 'MyCtrl2', [ '$scope', function($scope){
$scope.name = 'Another hero';
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$scope', function($scope){
$scope.name = 'Hero';
console.log("Another Module");
}]);
I expect all of the variables to be synced to the same variable. However, each "name" variable has different values at different controllers.
Why? and how can I make all those same variables to be synced?
Here is the JSFiddle: http://jsfiddle.net/yaprak/3Bc7f/1/

Answer 1

It's because they reside in different scopes. To sync $scope.name to the same value, you need to create a service that holds the value.
By default, controllers can't share data, but controllers and services can.
Update
I updated your fiddle
http://jsfiddle.net/3Bc7f/6/
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', ['myFactory']);
myModule.controller( 'MyCtrl', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
} ]);
myModule.controller( 'MyCtrl2', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log(data.name);
}]);
angular.module('myFactory', [])
.factory('data',[ function() {
return {
'name': 'John Doe'
};
}])
;

Answer 2

You should use service with two way binding data
var storage = { name : 'Tolya'}
myApp.service('srv', function() {
return storage;
})
http://jsfiddle.net/molo4nik11/3Bc7f/2/

Answer 3

You can use $rootScope instead of $scope. Now all scope of name have hero.
var myApp = angular.module('myApp',['myModule', 'anotherModule']);
var myModule = angular.module('myModule', []);
myModule.controller( 'MyCtrl', [ '$rootScope', function($rootScope) {
$rootScope.name = 'Superhero';
console.log("My module");
} ]);
myModule.controller( 'MyCtrl2', [ '$rootScope', function($rootScope){
$rootScope.name = 'Another hero';
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$rootScope', function($rootScope){
$rootScope.name = 'Hero';
console.log("Another Module");
}]);