Communicating between controllers in AngularJs

Question

I have a simple question: what\'s the best (\'cleanest\', \'scaleable\') path one should go when it comes to interact between (let\'s say) two controllers. Would that be to defi

Answer 1

Use service to share data between controllers

Your case is trying to share data between controllers, rather than watch service's value in controllers, I think directly reference service object to controller's scope is a better way

So your view can be

 
Value in cntrl1: {{ myService.value }} Change to 'value1'

  
Value in cntrl2: {{ myService.value }} Change to 'value2'

and change your controllers to

app.controller('cntrl1', function(myService, $scope) {
  $scope.myService = myService;
  $scope.update = function(str) {
    $scope.myService.setValue(str);
  }
});

app.controller('cntrl2', function(myService, $scope) {
  $scope.myService = myService;
  $scope.update = function(str) {
    $scope.myService.setValue(str);
  }
});

Use $broadcast/$emit

Just as @squiroid points out, you can use $broadcast to broadcast events to any controllers who is monitoring targeted events.

Please note here, you'd better not use $rootScope.$broadcast + $scope.$on but rather $rootScope.$emit+ $rootScope.$onas $broadcast event will bubble down through all descendant scopes, which might lead to serious performance problems.