Why do we use $rootScope.$broadcast in AngularJS?

Last Updated : 08 Sep, 2022

The $rootScope.$broadcast is used to broadcast a “global” event that can be caught by any listener of that particular scope. The descendant scopes can catch and handle this event by using $scope.$on.

Syntax:

$rootScope.$broadcast(name, args)
$scope.$on(name, listener);

Parameter value:

listener: It is used to specify the function to call when the event is caught.

Approach:

Create a ParentController from which you would want to raise/broadcast an event.
Use $rootScope.$broadcast in AngularJS to broadcast the event from the ParentController.
Create a ChildController or an ExternalController (i.e., not a direct descendant of the ParentController) to catch and handle the event.
Use $scope.$on in AngularJS to catch the respective event.

Example: This example uses $rootScope.$broadcast to raise an event.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.js"> 
    </script> 
    <script type="text/javascript"> 
        var app = angular.module('app', []); 
        app.controller('ParentController', function ( 
            $rootScope, $scope) { 
            $scope.broadcastMessage = function () { 
                $rootScope.$broadcast('newEvent', { 
                    message: $scope.parentMessage 
                }); 
            }; 
        }); 
        app.controller('ChildController', function ($scope) { 
            $scope.$on('newEvent', function (event, args) { 
                $scope.message = args.message; 
            }); 
        }); 
        app.controller('ExternalController', function ($scope) { 
            $scope.$on('newEvent', function (event, args) { 
                $scope.message = args.message; 
            }); 
        }); 
    </script> 
    <style type="text/css"> 
        h1, h2, 
        code { 
            color: green; 
        } 
  
        p { 
            color: green; 
            display: inline-block; 
        } 
  
        div { 
            border-color: black; 
            border-style: solid; 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body ng-app="app"> 
    <h1>GeeksforGeeks</h1> 
    <h3>AngularJS $rootScope.$broadcast</h3> 
    <div ng-controller="ParentController"> 
        <h1>Parent Controller</h1> 
        <input ng-model="parentMessage"> 
        <button ng-click="broadcastMessage()"> 
            Broadcast Message 
        </button> 
        <br><br> 
        <div ng-controller="ChildController"> 
            <h2>Child Controller</h2> 
            <p>Message :</p> 
            <code>{{message}}</code> 
        </div> 
    </div><br><br> 
    <div ng-controller="ExternalController"> 
        <h1>External Controller</h1> 
        <p>Message :</p> 
        <code>{{message}}</code> 
    </div> 
</body> 
</html>