how to broadcast and emit events to other controllers in angular that have no parent-child relationship

Question

I am trying to get hints from this post - Working with $scope.$emit and $scope.$on but nothing seems to work when the controllers are in no way related to each other.

That is -

<div ng-controller="CtrlA">
</div>

<div ng-controller="CtrlB">
</div>

and in CtrlB I would do something like this:

$rootScope.$broadcast('userHasLoggedIn', {})

and in CtrlA I would listen like so:

$rootScope.$on('userHasLoggedIn, function(event, data){});

And no - CtrlA never receives the broadcasted event unless I nest CtrlB div inside CtrlA div

Any idea?

in CtrlA you should do `$scope.$on` as the `$scope` is a child scope from `$rootScope` — Joao Leal, Nov 19 '14 at 13:35
@Chandermani CtrlA is loaded for sure, i put an alert and it was triggered. Joao - that doesn't work either. but are you saying that it should work though? — David, Nov 20 '14 at 00:30
Your code should be working just fine. Here's a [working demo](http://codepen.io/anon/pen/qEdEVp). Next time creating your jsfiddle/codepen first to better demonstrate your problem. — hon2a, Nov 24 '14 at 08:14
Did you try $rootScope.$emit in CtrlB and $rootScope.$on in CtrlA? — gorpacrate, Nov 24 '14 at 12:44
@JoaoLeal, gorpacrate: Why give random suggestions ? That doesn't help :( — gkalpak, Nov 24 '14 at 15:03
@David: Are you sure CtrlA is loaded ***before*** the broadcast happens ? Seems like your code should work. — gkalpak, Nov 24 '14 at 15:03
Joao's comment is a bit off-topic, however listening on local scope makes sense as the listener will be automatically unregistered when the scope is destroyed. Otherwise you need to do that manually (just my two cents on that topic). — Pavel Horal, Nov 24 '14 at 15:56
@David Seems like you could extend scope by adding couple of methods to manage a pub/sub communication and help your controllers more loosely coupled. See the [second part of this answer](http://stackoverflow.com/questions/25274563/angularjs-communication-between-directives#answer-25274665) — PSL, Nov 28 '14 at 22:37
guys thanks all for your help. it seems that my code indeed works just that i thought this angular broadcasting would work on different browser tabs. Meaning another browser tab can broadcast an event and the other browser tab would catch it but looks like Angular doesn't work that way. Need to use window.postMessage. — David, Dec 08 '14 at 08:39

score 5 · Answer 1 · answered Nov 24 '14 at 15:48

It is tough to answer without knowing what you tried. Please see this plnkr: http://plnkr.co/edit/hYzWOrgEyPLlCMZnDCo2?p=preview

I basically created two controllers, one sends some text to the other:

app.controller('CtrlA', function($scope, $rootScope) {
  $scope.submit = function(){
    $rootScope.$broadcast('userHasLoggedIn', $scope.input);
  }

});

app.controller('CtrlB', function($scope) {
  $scope.$on('userHasLoggedIn', function(event, data){
    $scope.data = data; 
  });

  $scope.data = 'nothing';
});

how to broadcast and emit events to other controllers in angular that have no parent-child relationship

1 Answers1