JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="mainController as mainCtrl">
    <div>
      <input type="text" ng-model="mainCtrl.message" />
    </div>
    <div>
      {{mainCtrl.message}}
    </div>
  </div>
  <hr/>
  <div ng-controller="secondController as secondCtrl">
    <div>
      <input type="text" ng-model="secondCtrl.message" />
    </div>
    <div>
      {{secondCtrl.message}}
    </div>
  </div>

JavaScript

angular.module('app',[])

      .controller('mainController', function(mainService, $scope){
          var self = this;
          self.message = mainService.message;
          $scope.$watch(function(){return mainService.message}, function(){
              self.message = mainService.message;
          });
          $scope.$watch(function(){return self.message}, function(){
              mainService.message = self.message;
          });
      })

      .controller('secondController', function(mainService, $scope){
          var self = this;
          self.message = mainService.message;
          $scope.$watch(function(){return mainService.message}, function(){
              self.message = mainService.message;
          });
          $scope.$watch(function(){return self.message}, function(){
              mainService.message = self.message;
          });
          $scope.$watch
      })

      .service('mainService', function(){
          var self = this;
          self.message = 'service';

      });