Software Development

Communicate between controllers via $rootScope in AngularJS

AngularJS provides facilities for sharing data between scopes. Scopes are organized in a hierarchy with root scope ($rootScope) as the parent node. Each controller (or instance thereof) is given a new scope that is a child of the root scope.


These are the scopes’ (both $scope and $rootScope) methods that enable communication between scopes.

$broadcast(name, args)Sends an event from the current scope down to all of the child scopes. The arguments
are the name of the event and an object used to provide supplementary data with
the event.
$emit(name, args)Sends an event from the current scope up to the root scope.
$on(name, handler)Registers a handler function that is invoked when the specified event is received by
the scope.


Consider the following hierarchy of $rootScope and $scope.


MainCtrl1 sends message to MainCtrl2 via $rootScope.$broadcast(…). If we were to use $scope.$broadcast(…) instead, the  message will never reach MainCtrl2.


Sample Output



Got comments, or suggestions? Please visit our Facebook page!

You Might Also Like