JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="myController1">
        <ul>
            <li><b>myController1</b></li>
            <li>{{in}}</li>
            <input type="text" ng-model="in"></input>
        </ul>
    </div>    
    <div ng-controller="myController2">
        <ul>
            <li><b>myController2</b></li>
            <li>{{val()}}</li>
        </ul>
        <input type="text" ng-model="newValue"></input><br/>
        <button ng-click="setVal(newValue)">Set Values</button>
    </div>
</div>

JavaScript

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

app.service('sharedProperties', function() {
    var val = 'shared property';
    
    return {
        getVal: function() {
            return val;
        },
        setVal: function(value) {
            val = value;
        }
    }
});

app.controller('myController1', function($scope, sharedProperties) {
    $scope.val = sharedProperties.getVal();
    $scope.in = 0;
    $scope.$watch('val', function () {
        $scope.in = sharedProperties.getVal();
    })
});

app.controller('myController2', function($scope, sharedProperties) {
    $scope.val = sharedProperties.getVal;
    $scope.setVal = function(newValue) {
        sharedProperties.setVal(newValue);
    };
});