JSFiddle - React, Tailwind, and code Playground

by rwhitmire

HTML

<div ng-app="MyApp">
    <h3>Foo Controller:</h3>
    <div ng-controller="FooCtrl">
        <input type="text" ng-model="message" ng-change="sendMessage()" />
    </div>
    
    <h3>Bar Controller:</h3>
    <div ng-controller="BarCtrl">
        {{message}}
    </div>
</div>

JavaScript

var module = angular.module("MyApp", []);

module.service('bridgeService', function(){
    var event;
    
    this.send = function(message){
        event(message);
    };
    
    this.onReceive = function(action){
        event = action;
    };
});

module.controller('FooCtrl', function($scope, bridgeService){
    $scope.sendMessage = function(){
        bridgeService.send($scope.message);
    }
});

module.controller('BarCtrl', function($scope, bridgeService){
    bridgeService.onReceive(function(message) {
        $scope.message = message;
    });
});