AngularJS: How can I share data across controller? - angularjs

Question

I want to get title dynamically. How do I share the $scope.title in indexCtrl?
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope){
$scope.title = 'OneFC';
})
app.controller('secondCtrl', function($scope){
$scope.title = 'UFC';
})
app.controller('indexCtrl', function(){
// i want to get the title here depends on the active state in ui-router.
}

Answer 1

We have some ways to do this. rootscope's property can handle this which is same as global var in your app. But I love OOP and I think we should encapsulate the processing of data in a service.
Code for service:
app.factory('titleFactory',function(){
var _title = null;
return {
setTitle: function(title) {
this._title = title;
},
getTitle: function() {
return this._title;
}
}
});
Now in any controller you just need inject and call get or set title to handle your data.
Set title value (same for secondCtrl):
app.controller('firstCtrl', function($scope,titleFactory){
titleFactory.setTitle('OneFC');
})
Title now can be accessed by all other controllers like this:
app.controller('indexCtrl', function(){
$scope.title = titleFactory.getTitle();
});

Answer 2

I would recomend passing it as Data inside your routes definitions (you can do that in case you were not aware of) just like this:
$stateProvider.state("page1", {
url: "/page1",
data: {
title: "Your Title Here"
},
views: {
}
}).state("page2", {
url: "/page2",
data: {
title: "Your Other Title Here"
},
views: {
}
})
Afterwards, you can use it in your controller like this:
app.controller('indexCtrl', function($state){ //Note that you inject state
$scope.pageTitle= $state.data.title;
}
Hope this works for you
Regards

Answer 3

try to use $rootScope.title?
app.controller('indexCtrl', ['$rootScope','$scope',function($rootScope, $scope){
$rootScope.$on("toindexCtrl", function (e) {
$scope.$apply(function () {
$scope.title = $rootScope.title;
});
});
}])
app.controller('secondCtrl', ['$rootScope','$scope', function($rootScope, $scope){
$rootScope.title = 'UFC';
$rootScope.$broadcast('toindexCtrl');
}])
This code work for me. I also use $broadcast to listen when the value changed.