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.$watch('value.storedObject', function(){
     
      StoreService.emit('refresh', $scope.value.storedObject);
  
  })

  
  $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)
  
  
});