Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-controller="MyCtrl2"> Hello, {{name}}! </div>
</div>
<div ng-controller="AnotherCtrl">
Hello, {{name}}!
</div>
JavaScript
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("1: " + data.name);
} ]);
myModule.controller( 'MyCtrl2', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log("2: " + data.name);
}]);
var anotherModule = angular.module('anotherModule', []);
anotherModule.controller( 'AnotherCtrl', [ '$scope', 'data', function($scope, data) {
$scope.name = data.name;
console.log("3: " + data.name);
}]);
angular.module('myFactory', [])
.factory('data',[ function() {
return {
name: 'John Doe'
};
}])
;