We are building what will become a big angular application. We already use heavily directives, services and have as many as 14 controllers.
Our problem is to share data between controllers. We would like to be able to share data between controllers that are far away (not siblings) and that would not break the bi-directional binding.
I proposed to use services dedicated to carrying data.
var MyApp = angular.module('MyApp', []);
MyApp.factory('dataContainer', function(){ return {} });
function FirstCtrl($scope, dataContainer) {
$scope.data = dataContainer;
}
function SecondCtrl($scope, dataContainer) {
$scope.data = dataContainer;
}
You can try it in the fiddle http://jsfiddle.net/didier_/R2Bgs/2/.
Is that good practice?
Using services for that is absolutely a good idea. You don't have to think about such objects as services, that's just the default naming in an Angular project. Once your application grows, you probably end up with factories for different types of objects (state objects as in your example, resource objects, helper objects, etc), and the name "services" becomes a bit too ambiguous.
I'd be cautious about having a raw state object passed around like that though. You should probably wrap access to it in methods/getters and setter to avoid having different parts of your application to overwrite each others state when they shouldn't, which can be a bit of a pain to debug.