<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<h4>Ctrl1</h4>
<div>{{text}}</div>
<input type='text' ng-model='text' />
<button type='button' ng-click='send();'>Send Data</button>
</div>
</div>
<div ng-controller='MainCtrl2'>
<div>
<h4>Ctrl2</h4>
<div>{{text}}</div>
</div>
</div>
</body>var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope','dataShare',
function ($scope,dataShare) {
$scope.text = 'Hey';
$scope.send = function(){
dataShare.sendData($scope.text);
};
}
]);
mainMod.controller('MainCtrl2', ['$scope','dataShare',
function ($scope,dataShare) {
$scope.text = '';
$scope.$on('data_shared',function(){
var text = dataShare.getData();
$scope.text = text;
});
}
]);
mainMod.factory('dataShare',function($rootScope){
var service = {};
service.data = false;
service.sendData = function(data){
this.data = data;
$rootScope.$broadcast('data_shared');
};
service.getData = function(){
return this.data;
};
return service;
});
External CSS
This Pen doesn't use any external CSS resources.