JSFiddle - React, Tailwind, and code Playground

by CodeWarrior404

HTML

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

JavaScript

//https://stackoverflow.com/questions/44312435/angular-services-not-updating-controllers
angular.module('app',[])

      .controller('mainController', function(mainService, $scope, $rootScope){
          var self = this;
          self.message = mainService.message;
          
          self.changeHandler = function () {
          	mainService.message = self.message;
            $rootScope.$broadcast('MAIN_SERVICE_VALUE_CHANGED');
          };
          $rootScope.$on('MAIN_SERVICE_VALUE_CHANGED', function () {
            self.message = mainService.message;
          });
      })

      .controller('secondController', function(mainService, $scope, $rootScope){
          var self = this;
          self.message = mainService.message;
          
          self.changeHandler = function () {
          	mainService.message = self.message;
            $rootScope.$broadcast('MAIN_SERVICE_VALUE_CHANGED');
          };
          $rootScope.$on('MAIN_SERVICE_VALUE_CHANGED', function () {
            self.message = mainService.message;
          });
      })

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