JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.8/angular.js"></script>
<div  ng-app="myApp"  >
   <div ng-controller="myController1" >
       myController1:
       <button ng-click="sendmsg()">send</button>
   </div>
   <div ng-controller="myController2" >myController2:{{data}}</div>
   <div ng-controller="myController3 as vm" >myController3: {{vm.data}}</div> 
    <div my-directive="" > </div>  
</div>

JavaScript

var myApp = angular.module("myApp",[] );
 
myApp.factory('bus', function ($rootScope) {                
        return {
            post: post,
            register: register           
        };
    
        function post(eventname,data) {
            $rootScope.$emit(eventname,data);
        };
    
        function register(eventname,scope, handler) {
            var myListener = $rootScope.$on(eventname, function (event, data) {
                handler(data);
            });
            scope.$on('$destroy', myListener); 
        };        
    });

myApp.controller("myController1", function($scope,bus) {
 $scope.sendmsg = function() {
     bus.post('some:event',new Date());
    };
   
});

myApp.controller("myController2", function($scope,bus) {
    function register() {
      bus.register('some:event',$scope, function(data) {      
         console.log("myController2 :"+data);
            $scope.data=data;          
      });
    };
    register();    
});

myApp.controller("myController3", function($scope,bus) {
    var vm= this;
    function register() {
      bus.register('some:event',$scope, function(data) {        
          console.log("myController3 :"+data);
          vm.data=data;
      });
    };
    register();   
});

myApp.directive('myDirective', function(bus,$timeout) {   
    function link(scope, element, attrs) {         
            bus.register('some:event',scope, function(data) {                     
              console.log("myDirective :"+data);
              scope.data=data;  
           }); 
    };   
  return {
    scope:{},
    link: link,
    template: 'myDirective: {{ data }}'
  };
});