JSFiddle - React, Tailwind, and code Playground

by stuttufu

HTML

<div ng-app="myApp">
    <div ng-controller="myController1">
      <h1>myController1</h1>
      <p>{{object.data}}</p>
    </div>    
    <div ng-controller="myController2">
      <h1>myController2</h1>
      <p>{{object.data}}</p>
    </div>
    <div ng-controller="myController3">
      <h1>myController3</h1>
      <input type="text" ng-model="object.data"/>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.service('sharedProperties', function() {
    var _privateObject = {
        data: 'test object value'
    };
    this.object = _privateObject;
});

app.controller('myController1', function($scope, sharedProperties) {
    $scope.object = sharedProperties.object;    
});

app.controller('myController2', function($scope, sharedProperties) {
    $scope.object = sharedProperties.object; 
});

app.controller('myController3', function($scope, sharedProperties) {
    $scope.object = sharedProperties.object; 
});