JSFiddle - React, Tailwind, and code Playground

by Dawid Kosior

HTML

<div ng-app="serveClicks">
    <div ng-controller="responderController">
        <div ng-repeat="m in data">{{m}}</div>
    </div>
    <button ng-controller="senderController"
    ng-click="sendClick()">Click</button>
</div>

JavaScript

angular.module("serveClicks", [])
.service("messageService", function() {
    this._subscribers = [];
    this.messages = [];
  
    this.addSubscriber = function(sub) {
        this._subscribers.push(sub);
    };
    
    this.sendMessage = function(message) {
    		this.messages.push(message);
        for (var i = 0; i < this._subscribers.length; i++) {
            this._subscribers[i].receive(this.messages);
        }
    };
})
.controller("senderController", function($scope, messageService) {
    $scope.sendClick = function() {
        messageService.sendMessage("click");
    };
})
.controller("responderController", function($scope, messageService) {
    $scope.data = [];
    this.receive = function(message) {
         $scope.data.push(message);
    };
    messageService.addSubscriber(this);
});