Sharing data between AngularJS controllers but having the shared data come from an Ajax call

Question

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 come 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?

Answer 1

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.com/pablodenadai/SharingModelsAngularJS/blob/master/app/scripts/controllers/main.js

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

Hope it helps.

Answer 2

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