JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch(function(){
        return App.getDate();
        }, function() {
        console.log('Ctrl1: ' + App.getDate());
            $scope.status = App.getDate();
        });
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch('status', function() {
            console.log('Ctrl2: ' + $scope.status);
            App.setDate($scope.status);
        });
})
    .service('App', function () {
        this.data = {};
        this.data.date = 'someDate';
        
        var self = this;
        var date = ''

      self.setDate = function (value) {
         return this.data.date = value
       }
         self.getDate = function () {
           return this.data.date;
         }
});