I've figured out how to share data between two AngularJS controllers using a shared service in the contrived example below:

(Functioning fiddle)

var app = angular.module('myApp', []);

app.factory('UserData', function() {
    var data = {foo: 'bar'};

    return {
        getData: function() {
            console.log('getData');
            return data;
        },
        setData: function(newData) {
            data = newData;
        }
    };
});

function MainCtrl($scope, UserData) {
    console.log('MainCtrl');
    console.log(UserData.getData());
}
MainCtrl.$inject = ['$scope', 'UserData'];

function JobListCtrl($scope, UserData) {
    console.log('JobListCtrl');
    console.log(UserData.getData());
}
JobListCtrl.$inject = ['$scope', 'UserData'];

My issue is that I would like the data held in UserData to e from an Ajax call (presumably using $http).

I tried doing the Ajax call in the UserData factory function but, since it's running asynchronously, MainCtrl and JobListCtrl are executed before the UserData service actually has any data in it.

Can someone give me some direction about how to set that up?

I've figured out how to share data between two AngularJS controllers using a shared service in the contrived example below:

(Functioning fiddle)

var app = angular.module('myApp', []);

app.factory('UserData', function() {
    var data = {foo: 'bar'};

    return {
        getData: function() {
            console.log('getData');
            return data;
        },
        setData: function(newData) {
            data = newData;
        }
    };
});

function MainCtrl($scope, UserData) {
    console.log('MainCtrl');
    console.log(UserData.getData());
}
MainCtrl.$inject = ['$scope', 'UserData'];

function JobListCtrl($scope, UserData) {
    console.log('JobListCtrl');
    console.log(UserData.getData());
}
JobListCtrl.$inject = ['$scope', 'UserData'];

My issue is that I would like the data held in UserData to e from an Ajax call (presumably using $http).

I tried doing the Ajax call in the UserData factory function but, since it's running asynchronously, MainCtrl and JobListCtrl are executed before the UserData service actually has any data in it.

Can someone give me some direction about how to set that up?

• javascript
• angularjs

• 1 See stackoverflow./questions/12505760/… for how to use a promise and then have your controller wait for it to be resolved. – Mark Rajcok Commented Feb 26, 2013 at 20:22

2 Answers 2

I've created this example that shows how to fetch, store and share data (models) across different controllers without loosing its bindable functionality.

Live Example: http://pablodenadai.github.io/SharingModelsAngularJS/

Source code 1: (Resources and Model abstraction) https://github./pablodenadai/SharingModelsAngularJS/blob/master/app/scripts/controllers/main.js

Repo: https://github./pablodenadai/SharingModelsAngularJS

Hope it helps.

Here are some starting points to help you out:

1. How to get the data from the server (and how to construct a basic 'model' service): SO post

2. How to hold the controller execution until data is fetched from the server: screencast from egghead.io