Controlling order of execution in angularjs

Question

I have inherited an angular app and now need to make a change.

As part of this change, some data needs to be set in one controller and then used from another. So I created a service and had one controller write data into it and one controller read data out of it.

angular.module('appRoot.controllers')

.controller('pageController', function (myApiService, myService) {
    // load data from API call
    var data = myApiService.getData();

    // Write data into service
    myService.addData(data);
})

.controller('pageSubController', function (myService) {
    // Read data from service
    var data = myService.getData();

    // Do something with data....
})

However, when I go to use data in pageSubController it is always undefined.

How can I make sure that pageController executes before pageSubController? Or is that even the right question to ask?

EDIT

My service code:

angular.module('appRoot.factories')

.factory('myService', function () {
    var data = [];

    var addData = function (d) {
        data = d;
    };

    var getData = function () {
        return data;
    };

    return {
        addData: addData,
        getData: getData
    };
})

Answer 1

If you want your controller to wait untill you get a response from the other controller. You can try using $broadcast option in angularjs.

In the pagecontroller, you have to broadcast your message "dataAdded" and in the pagesubcontroller you have to wait for the message using $scope.$on and then process "getData" function.

You can try something like this :

angular.module('appRoot.controllers')
.controller('pageController', function (myApiService, myService,$rootScope) {
    // load data from API call
    var data = myApiService.getData();

    // Write data into service
    myService.addData(data);
    $rootScope.$broadcast('dataAdded', data);
})

.controller('pageSubController', function (myService,$rootScope) {
    // Read data from service
    $scope.$on('dataAdded', function(event, data) {
        var data = myService.getData();
    }

    // Do something with data....
})