JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">

		<div ng-controller="FirstCtrl">
			<input type="text" ng-model="Value">
			<br>Controller 1 : <strong>{{Value}}</strong>
		</div>
		<hr>
		<div ng-controller="SecondCtrl">
			Controller 2: {{Value}}
		</div>

	</div>

JavaScript

// declare the app with no dependencies
var myApp = angular.module('myApp', []);


myApp.service('Data', function(){
    var data =
        {
            Value: ''
        };
    
    return {
        getValue: function () {
            return data.Value;
        },
        setValue: function (Value) {
            data.Value = Value;
        }
    };
});

myApp.controller('FirstCtrl', function( $scope, Data ) {
    
    $scope.Value = '';
    
    $scope.$watch('Value', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setValue(newValue);
    });
});

myApp.controller('SecondCtrl', function( $scope, Data ){
	
    $scope.$watch(function () { return Data.getValue(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.Value = newValue;
    });
});