JSFiddle - React, Tailwind, and code Playground

by ynonp

HTML

<div ng-app="myApp">
<div ng-controller="Ctrl1">
    <div> Ctrl1 Status is: {{data.status}}
    </div>
    <div>
        <input type="text" ng-model="data.status" />
    </div>
<div ng-controller="Ctrl2">Ctrl2 Status is: {{data.status}}
    <div>
        <input type="text" ng-model="data.status" />
    </div>
</div>  
</div>

JavaScript

angular.module('myApp', [])
  .controller('Ctrl1', function ($scope, App) {
  $scope.data = App;
  
})
  .controller('Ctrl2', function ($scope, App) {
  
  $scope.data = App;
})
  .service('App', function ($rootScope) {
  this._data = {status:'Good'};  			
  
  Object.defineProperty(this, 'status', {
    get: function() {
      return this._data.status;
    },
    set: function(value) {
      this._data.status = value;
    }
  });
    
  
});