Understanding Angular’s $scope event system with $broadcast and $on

Firstly, you should know one thing that you can use $scope or $rootScope to pass data from one controller to another controller.

In this case, we will use only $scope and only in downward direction for now.

First of all, parent-child scope relation does matter. You have two possibilities to emit some event:

  • $broadcast — dispatches the event downwards to all child scopes,
  • $emit — dispatches the event upwards through the scope hierarchy.
  1. If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl:
    function firstCtrl($scope){
        $scope.$broadcast('someEvent', [1,2,3]);
    function secondCtrl($scope){
        $scope.$on('someEvent', function(event, mass) {console.log(mass)});
  2. In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl).
    function firstCtrl($rootScope){
        $rootScope.$broadcast('someEvent', [1,2,3]);
  3. Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope:
    function firstCtrl($scope){
        $scope.$on('someEvent', function(event, data) { console.log(data); });
    function secondCtrl($scope){
        $scope.$emit('someEvent', [1,2,3]);

More on this : http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs


My Example:

Scenario: When i click on a button, i should be able to see a message “Sathyalog” in console.log like shown below.
13-08-2014 17-16-33


<script src=”angular.min.js”></script>
<script src=”script.js”></script>
<div ng-app=”sathya”>
<div ng-controller=”ParentCtrl”>
<button ng-click=”go()”>Button </button>
<div ng-controller=”SiblingCtrl”>


var app = angular.module(‘sathya’,[]);

function ParentCtrl ($scope) {
console.log(“this is parent”);
// going down!

$scope.go = function() {
$scope.$broadcast(‘parent’, ‘Sathyalog’)



function SiblingCtrl ($scope) {
console.log(“this is child”);
$scope.$on(‘parent’, function (event, data) {
console.log(data); // My broad cast message


You can check the same in my jsfiddle here.


For $rootScope example..check here.


2 thoughts on “Understanding Angular’s $scope event system with $broadcast and $on

  1. Pingback: Understanding $rootScope event with $broadcast and $on | Sathya's Log

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s