JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<div ng-controller=TheCtrl>
<div>
    <button ng-click=notify()>Notify</button>
    
    {{ notifications }}

</div>
<div>
    <button ng-click=sendMessage()>Send Message</button>
    {{ message }}

</div>    
</div>

JavaScript

angular.module('app', []);

angular.module('app').controller('TheCtrl', function($scope, NotifyingService) {
    $scope.notifications = 0;
    $scope.message = "Nothing";
    
    $scope.notify = function() {
        NotifyingService.notify();
    };
    
    $scope.sendMessage = function() {
    		NotifyingService.messageNotify('Message');
    }
    
    // ... stuff ...
    NotifyingService.subscribe($scope, function somethingChanged() {
        // Handle notification
        $scope.notifications++;
    });
    
    NotifyingService.messageSubscribe($scope, function somethingChanged(what) {
        // Handle notification
        $scope.message = what;
    });
});

angular.module('app').factory('NotifyingService', function($rootScope) {
    return {
        subscribe: function(scope, callback) {
            var handler = $rootScope.$on('notifying-service-event', callback);
            scope.$on('$destroy', handler);
        },

        notify: function() {
            $rootScope.$emit('notifying-service-event');
        },
        
        messageNotify: function(value) {
        	$rootScope.$emit('notifying-service-event-1', value)
        },
        
          messageSubscribe: function(scope, callback) {
            var handler = $rootScope.$on('notifying-service-event-1', callback);
            scope.$on('$destroy', handler);
        },
        
    };
});