JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="FirstController">
<fieldset>
<legend>FirstController:</legend>
<input type="text" ng-model="value.storedObject" />
<button ng-click="setValue(value)">Set value</button>
</fieldset>
</div>
<div ng-controller="SecondController">
<fieldset>
<legend>SecondController:</legend>
Value: {{value.storedObject}}
</fieldset>
</div>
</div>
JavaScript
angular.module('app', []);
angular.module('app').factory('StoreService', function() {
var listeners = {};
var emit = function(name, val) {
if(listeners[name]) {
listeners[name](val)
}
}
var on = function(name, callback) {
listeners[name] = callback;
}
return {
emit: emit,
on: on,
storedObject: ''
};
});
angular.module('app').controller('FirstController', function($scope, StoreService) {
$scope.value = StoreService;
$scope.setValue = function(val){
StoreService.emit('refresh', val);
}
});
angular.module('app').controller('SecondController', function($scope, StoreService) {
$scope.value = StoreService;
var refresh=function(data){
alert('working' + JSON.stringify(data));
}
StoreService.on('refresh', refresh)
});