Using Angular Events

AngularJS provides three services to allow communication between gadgets:

$broadcast

$emit

$on

$broadcast

$broadcast service dispatches an event name downwards to all child scopes (and their children) and notify to the registered $scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$scope.$broadcast('eventName', { message: msg });

$emit

$emit service dispatches an event name upwards through the scope hierarchy, and notifies the registered $scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards towards the root scope, and calls all the registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$scope.$emit('eventName', { message: msg });

$on

$on service listens to the events of an event type. $on can catch the event dispatched by $broadcast and $emit and handle the event accordingly.

$scope.$on('eventName', function (event, args) {
$scope.message = args.message;
console.log($scope.message);
});