Angular $rootScope.$broadcast() event caught twice in controller

Question

Broadcating event on button click :-

$scope.onButtonClick = function(){     $rootScope.$broadcast('onButtonClick'); } 

And catching event in another controller :-

$rootScope.$on('onButtonClick',function(event){   alert("catched");   console.log(event); }); 

But it caught twice even though it fired only once. Why is that?

Answer 1

As it turned out the multiple controllers were instantiated due to ng-controller declaration in html and also as part of state setup for ui-router.

The solution is to remove one of the declarations.

Answer 2

If you broadcast an event on $rootScope, you can catch the event on each controller $scope. IMO you should not catch the event on the $rootScope.

$scope.$on('onButtonClick',function(event){   alert("catched");   console.log(event); }); 

I've created a plunker showcase, which shows that it works exactly as expected. Plunker

It could be possible that you have multiple instances of the same controller, where you catch the event. Please check this as Chandermani suggested.