Riaxe Systems | Blog



Understanding Angular’s $scope and $rootscope event system $emit , $broadcast and $on

Author : Alex Parker Date : May 28, 2017
No Comments

Understanding Angular’s $scope and $rootscope event system $emit , $broadcast and $on

AngularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.

$rootScope.$emit :- only lets other $rootScope listeners to catch it. This is good to use when you don’t want every scope to listen it. Most high level communication have been done using this event.

$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. For example a child asking to their parents at home (but kids of neighbours can’t listen there talks).

$rootScope.$broadcast- It dispatches an event name downwards to all child scopes (and their children) and notifies to the registered $rootScope.Scope listeners. The event life cycle starts when $broadcast was called. All the listeners get notified and it goes downwards towards all childscopes and call all registered listeners. Parent is announcing a small outing on a specific day.

$scope.$broadcast is for the $scope itself and its children. The childrens are whispering among themselves so that their talk can’t reach their parents.

$on:- It listens to the event dispatched by $broadcast and $emit by the event name.

Hey guys, to make you better understand this angular event management system, I will give an example of parent and child controller.

A good way to visualise this example is through hierarchy of controller in HTML. In the example given below the Son and Daughter are children of Parent controller.

<!DOCTYPE html>




<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>

<script type=”text/javascript” src=”angular.min.js”></script>

<script type=”text/javascript” src=”angularEvents.js”></script>



<div ng-app=”angularEventApp”>

   <div ng-controller=”parentController”>


           <strong ng-click=”parentToChildren()”>{{name}}</strong>

           <input  ng-model=”parentMessage” />{{childMessage}}

           <button ng-click=”talkToAll()”>Send To All</button>

    <button ng-click=”talkToSon()”>Send To Son</button>

    <button ng-click=”talkTodaughter()”>Send To Daughter</button>

           <textarea ng-model=”parentArea”></textarea>


    <div ng-controller=”sonController”>

    <strong >{{name}}</strong>

    <input ng-model=”sonMessage” />{{childMessage}}

    <button ng-click=”talkToParent()”>Send To Parent</button>

    <button ng-click=”talkToSister()”>Send To Sister</button>

    <textarea ng-model=”sonArea”></textarea>


<div ng-controller=”daughterController”>

    <strong ng-click=”tellParents()”> {{name}}</strong>

<input ng-hide=”childMessage” ng-model=”daughterMessage” />{{childMessage}}

<button ng-click=”talkToParent()”>Send To Parent</button>

    <button ng-click=”talkToBrother()”>Send To Brother</button>

    <textarea ng-model=”daughterArea”></textarea>






Here the basic angular js code :

Here ParentController, sonController and daughterController are defined.


Here is the sample code for parentController


Here is the sample code for sonController


Here is the sample code for daughterController


In parent controller three functions are defined i.e talkToAll ,talkToSon,talkTodaughter .
Parent can communicate to any child controller or to all child controller. So in talkToAll() method of parent controller send the message to all the child controller using $scope.$broadcast event. Check below figure to the understand how event listen by child controller.

The parent controller will broadcast an event, and the children will listen for it.


Using emit send an event upwards the chain:

The child can talk to the parent in a similar way like using $emit instead of $broadcast.
The event from child controller can be listen by parent controller using $scope.on . The son controller emit an event and parent contoller can listen like this.


Using $rootScope.$emit to communicate to child controller:

The child can talk to another child using $rootscope instead of $scope. The event can be lister by child controller by $rooscope.$on. Check the below example how Son Controller and daughter controller can communicate to each other.

Children communicate through the parent:

children cannot directly communicate through events, as their scope’s are not linked. However, children do have access to their parent’s scope, so it is possible to hijack and broadcast an event from there.

This is done by calling $scope.$parent.$broadcast. Any of the siblings – and the parent, can listen to this event.


Here is a sample Gif image which shows the complete output.


Find the complete code here.


Article by: Biswajit Rout
Team Lead

Linkedin | Stackoverflow



Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>