JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<div ng-controller="FirstController">
<fieldset>
<legend>FirstController:</legend>
<input type="text" ng-model="value" />
<button ng-click="setValue(value)">Set value</button>
</fieldset>
</div>
<div ng-controller="SecondController">
<fieldset>
<legend>SecondController:</legend>
<button ng-click="getValue()">Get value</button>
Value: {{value}}
</fieldset>
</div>
</div>
JavaScript
angular.module('app', []);
angular.module('app').factory('StoreService', function () {
var storedObject;
return {
set: function (o) {
this.storedObject = o;
},
get: function () {
return this.storedObject;
}
};
});
angular.module('app').controller('FirstController', function ($scope, StoreService) {
$scope.setValue = function (value) {
StoreService.set(value);
};
});
angular.module('app').controller('SecondController', function ($scope, StoreService) {
$scope.getValue = function () {
$scope.value = StoreService.get();
};
});