AngularJS - Sharing variables between controllers [duplicate]

Question

This question already has answers here:

AngularJS: How can I pass variables between controllers? (16 answers)

Closed 11 years ago.

I know this has been posted before but I am still confused on how to achieve this for my specific problem.

my first controller:

myApp.controller("buttonCtrl", function($scope){
 $scope.johnny = [
 {quote: "Anything for My Princess", controller: Princess},
 {quote: "Don't Even Ask", controller: DontAsk}];
}

Now I would like to use the $scope.johnny object in this controller:

function Princess($scope){
 $scope.play = function(){
 //use $scope.johnny.quote or something of the sorts in here
 }
}

How would this be done? I have seen posts where $rootScope or services are used; however, how would I implement one in my case.

Thanks a lot.

• benjipelletier: @Beterraba Yes, I believe it is, but I am still unsure how to accomplish this. Thanks

Answer 1

Use Angular JS Services/ Factories

A sample example is shown below

Working Demo

HTML

<div ng-app='myApp'>
 <div ng-controller="ControllerOne">
 <button ng-click="getUserOne()">User One</button>
 </div>
 <div ng-controller="ControllerTwo">
 <button ng-click="getUserTwo()">User Two</button>
 </div>
</div>

SCRIPT

var app = angular.module('myApp', []);
app.factory('userFactory', function () {
 return {
 users: [{
 userId: 1,
 userName: "Jhonny"
 }, {
 userId: 2,
 userName: "Sunny"
 }]
 }
});
app.controller('ControllerOne', function ($scope, userFactory) {
 $scope.getUserOne = function () {
 alert(JSON.stringify(userFactory.users[0]));
 }
});
app.controller('ControllerTwo', function ($scope, userFactory) {
 $scope.getUserTwo = function () {
 alert(JSON.stringify(userFactory.users[1]));
 }
});

Also take a look at this stuff

How can I pass variables between controllers in AngularJS?

• benjipelletier: Thank you for the well explained answer. It helps a lot!
• benjipelletier: No problem, sorry it wouldn't let me it do it that early.