Understand $emit, $broadcast in Angularjs

$emit dispatches an event upwards , $broadcast dispatches an event downwards

$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. This is a child whining to their parents at home (but not at a grocery store where other kids can hear).

$scope.$broadcast is for the $scope itself and its children. This is a child whispering to its stuffed animals so their parents can't hear.

$rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don't want every $scope to get it. Mostly a high level communication. Think of it as adults talking to each other in a room so the kids can't hear them.

$rootScope.$broadcast is a method that lets pretty much everything hear it. This would be the equivalent of parents yelling that dinner is ready so everyone in the house hears it.

1. var app = angular.module('myapp', []);
2. app.controller("mainctrl", function ($scope) {
3. $scope.raise = function (msg) {
4. $scope.$broadcast('event-name', { message: msg });
5. };
6. });
7. 
   
8. app.controller("subCtrl", function ($scope) {
9. $scope.$on('event-name', function (event, args) {
10. $scope.message = args.message;
11. console.log($scope.message);
12. });
13. });