Why do we use $rootScope.$broadcast in AngularJS? Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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"> let 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> Output: Comment More infoAdvertise with us Next Article What is $scope and $rootScope ? R rohanr Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to use $scope.$apply() in AngularJS ? In this article, we will be discussing the $apply() function & how to use it in angularjs. In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever 3 min read How to use $rootScope to store variables in Angular ? In Angular, the $rootScope is the service that is the top-level for all the controllers in the Angular application. This exists over the entire application lifecycle and can also be used to store the variables that need to be accessed globally. $rootScope is a singleton object that is across the ent 4 min read What is scope in AngularJS ? In this article, we will see what the scope is in AngularJS and how to use Scope, along with understanding its implementation through the examples. The Scope in AngularJS is the binding part between HTML (view) and JavaScript (controller) and it is a built-in object. It contains application data and 4 min read What is $scope and $rootScope ? $scope is a JavaScript object that refers to the application data. It has properties and methods attached to it that are available for both the view and the controller. So, we can say that $scope is the binding part between the HTML view and the JavaScript controller. The $scope has all the model da 5 min read What is the Purpose of base href Tag in Angular ? In this article, we will see what is base href tag in Angular, along with understanding their basic implementation with the help of examples. Base href TagThe base href is important for generating correct routes, in -case you are deploying your project in a subfolder. The base href element has the a 2 min read What is the purpose of providedIn in Angular services? When building Angular applications, you'll often need to share data and logic across different components. This is where services come into play. Services are an easy way to encapsulate functionality and make it available wherever it's needed in your app. But as your application grows, managing the 3 min read Like