JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="AppController">
    <button ng-click="broadcastEvent()">Broadcast event</button>
    
    <div ng-controller="ChildController">
        Level 1 - event received: {{eventReceived}}
        <div ng-controller="ChildController">
            Level 2 - event received: {{eventReceived}}
        </div>
    </div>
</div>

JavaScript

angular
    .module("app", [])
	.controller("AppController", function($scope){
		$scope.broadcastEvent = function(){
			$scope.$broadcast("myEvent");
		}
	})
	.controller("ChildController", function($scope){
        $scope.eventReceived = false;
        
		$scope.$on("myEvent", function(event){
			// handle event only if it was not defaultPrevented
			if(event.defaultPrevented) {
				return;
			}
			// mark event as "not handle in children scopes"
			event.preventDefault();
			
			console.log("myEvent received");
            $scope.eventReceived = true;
		});
	})