AngularJS - Communicating Between Controllers

What people said

Recommends adardesign · 2012-08 · Stack Overflow · on “Can one AngularJS controller call another?”

See this fiddle: [LINK] Also watch the following video: Communicating Between Controllers [this video] Html: <div ng-controller="ControllerZero"> <input ng-model="message" > <button ng-click="handleClick(message);">LOG</button> </div> <div ng-controller="ControllerOne"> <input ng-model="message" > </div> <div ng-controller="ControllerTwo"> <input ng-model="message" > </div> javascript: var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = function() { $rootScope.$broadcast

Recommends venkat · 2012-11 · Stack Overflow · on “Synchronizing multiple views in Angular”

We would like to have all these three components change based on some global state. Ideally controlled by the routeprovider based on the url. To communicate between controllers, you can create a service, which can broadcast the changes to all its subscribers. Checkout the following youtube video and jsfiddles links in the video [this video]

Recommends JvdBerg · 2012-11 · Stack Overflow · on “How modify objects across scopes in AngularJS?”

What you want is to communicate between controllers. That is fairly easy to realize whit a service that can broadcast messages (or objects) between controllers. There is a nice youtube about this: [this video]

Recommends ral8 · 2013-08 · Stack Overflow · on “AngularJS - $rootScope property value undefined in service”

Thanks for the help Christoph! Timing is the issue (as it often with angular). I am trying to read before the write is complete. The confusion lies with Chrome displaying weird results in the console. To resolve my timing problem, I finally added a $rootScope.$dispatch(...) line and listen for the event in another controller as explained here - [this video]

Recommends KayakDave · 2013-10 · Stack Overflow · on “Call a method of a controller from another controller using 'scope' in AngularJS”

Each controller has it's own scope(s) so that's causing your issue. Having two controllers that want access to the same data is a classic sign that you want a service . The angular team recommends thin controllers that are just glue between views and services. And specifically- "services should hold shared state across controllers". Happily, there's a nice 15-minute video describing exactly this (controller communication via services): video [this video] One of the original author's of Angular, Misko Hevery, discusses this recommendation (of using services in this situation) in his talk entitled Angular Best Practices [LINK] (skip to 28:08 for this topic, although I very highly recommended watchi

Recommends Nidhish Krishnan · 2014-03 · Stack Overflow · on “alternative method instead $watch in angularjs”

See this fiddle: [LINK] Also watch the following video: Communicating Between Controllers [this video] A sample example is given below Html: <div ng-controller="ControllerZero"> <input ng-model="message" > <button ng-click="handleClick(message);">LOG</button> </div> <div ng-controller="ControllerOne"> <input ng-model="message" > </div> <div ng-controller="ControllerTwo"> <input ng-model="message" > </div> javascript: var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = fu

Recommends rsnorman15 · 2015-05 · Stack Overflow · on “ngRepeat not updating after model changed”

Yeah, I definitely agree. @Okazari is correct that it'll take a bit to build an example but there are plenty solutions and tutorials for sharing data between controllers: here is a good video [this video] and here is a SO answer [LINK]

Cites codef0rmer · 2012-09 · Stack Overflow · on “How to include one partial into other without creating a new scope?”

You can actually do this without using a shared service. $scope.$emit(...) can dispatch events to the $rootScope, which can listen for them and rebroadcast to the child scopes. Demo: [LINK] Reference: [this video] (see the first comment)

Cites Mr. Ott · 2012-11 · Stack Overflow · on “AngularJS Error: Unknown provider: sharedServiceProvider <- sharedService”

I'm follow this example [LINK] , also find here [this video] var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = function() { $rootScope.$broadcast('handleBroadcast'); }; return sharedService; }); After always getting this message Error: Unknown provider: sharedServiceProvider <- sharedService I just copy exactly the code of jsfiddle. My surprise. The same error. Crazy, cause at jsfiddle the code work perfectly. Could be this code deprecated?

Cites Mathew Berg · 2012-12 · Stack Overflow · on “Modify scope within link function in AngularJS”

Modifying scope in directives is fine. As for sharing information between directives there are a few methods. One is the way you described, where you access the parents controller and get it's data, another very similar method would be to have scope.data = scope.$parent.data; Instead of scope.data = parentCtrl.someData; The general way to share stuff between directives though is to use a service. This would allow you to inject the service into each directive and they can share the values. The problem with your initial method (and the one that I've described) is that if you ever move the element around so that the hierarchy of scopes change, your code will break. This is why I would recommend