JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="myCtrl"> 
    <p>Count: {{ count }}</p>
    <button ng-click="fireEvent()">Fire Event</button>
</div>

JavaScript

angular.module("app", [])
.controller('myCtrl', function($scope, $rootScope, notificationService) {
    $scope.count = 0;
    notificationService.subscribe();
    $rootScope.$on('event', function() {
        console.log("event listener");
        $scope.count++;
    });
    
    $scope.fireEvent = function() {
        // it is ok here due to ngClick directve
        $rootScope.$broadcast('event', true);
    };
})
.factory('notificationService',['$rootScope', function($rootScope) {

    var notificationService = {
        subscribe : function() {
             setInterval(function(){
                 console.log("some event happend and broadcasted");
                 $rootScope.$broadcast('event', true);
                 // angular does not know about this 
                 //$rootScope.$apply();
             }, 5000);
        }
    };
    return notificationService;
}]);