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 Why do we use $rootScope.$broadcast in AngularJS? 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 What is the use of a double-click event in AngularJS ? The ng-dblclick event in the AngularJS is useful for the HTML elements for getting the double click event, defined. In case a user wishes to get the function fired or other events when the double click of the HTML elements is done, then this event will be going to be needed. All the elements of the 2 min read How to access the Scope from outside JS Function in AngularJS ? In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a 4 min read What are Directives in AngularJS ? AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM mat 7 min read AngularJS $location Service The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s 4 min read Like