JSFiddle - React, Tailwind, and code Playground

by ynonp

HTML

<div ng-controller="Ctrl1">
    <div> Ctrl1 Status is: {{status}}
    </div>
    <div>
        <input type="text" ng-model="status" ng-change="notifyChange()" />
    </div>
<div ng-controller="Ctrl2">Ctrl2 Status is: {{status}}
    <div>
        <input type="text" ng-model="status" ng-change="notifyChange()" />
    </div>
</div>

JavaScript

angular.module('myApp', [])
  .controller('Ctrl1', function ($scope, App) {
  $scope.status = "Good";
  $scope.notifyChange = function() {
    App.setStatus($scope.status);
  };
	$scope.$on('statusChange', function(ev, data) {
    $scope.status = data;
  });
  
})
  .controller('Ctrl2', function ($scope, App) {
  $scope.status = "Good";
  $scope.notifyChange = function() {
    App.setStatus($scope.status);
  };
  
	$scope.$on('statusChange', function(ev, data) {
    $scope.status = data;
  });
})
  .service('App', function ($rootScope) {
  this._data = {status:'Good'};  			
	this.getStatus = function() {
    return this._data.status;
  };
  
  this.setStatus = function(newValue) {
    this._data.status = newValue;
    $rootScope.$broadcast('statusChange', newValue);
  };
  
  
});