JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="ControllerA">
    <button ng-click="send()">send</button>
</div>

JavaScript

var myModule = angular.module('myModule', []);

myModule.controller('ControllerA', ['$scope', '$rootScope', 'ServiceA', 'ServiceB', function($scope, $rootScope, ServiceA, ServiceB) {
    $scope.send = function(){
        console.log('send message');
        $rootScope.$broadcast('message');
    };
    $rootScope.$on('message', function(){
        console.log('received message from ControllerA');
    });
    console.log('init ControllerA');
}]);

myModule.factory('ServiceA', ['$rootScope', function($rootScope){
    $rootScope.$on('message', function(){
        console.log('received message from ServiceA');
    });
    console.log('init ServiceA');
}]);

myModule.factory('ServiceB', ['$rootScope', function($rootScope){
    $rootScope.$on('message', function(){
        console.log('received message from ServiceB');
    });
    console.log('init ServiceB');
}]);