Executing subcontroller before parent controller - angularjs

Question

I have the following HTML structure:
<div ng-controller="MainController">
<div ng-repeat="row in rows">
[[row.id]]
</div>
<div ng-controller="SubController">
<div ng-repeat="row in rows">
[[row.id]]
</div>
</div>
</div>
Angular code is:
myApp.controller('MainController', function ($scope, $http) {
$http.get('/foo/ajaxGetSomeData/').then(function (response) {
$scope.rows = response.data;
});
});
myApp.controller('SubController', function ($scope, $http) {
$http.get('/bar/ajaxGetAnotherThing/').then(function (response) {
var parentRows = $scope.$parent.rows;
var newRows = parentRows.merge(response.data);
$scope.rows = newRows;
});
});
The problem here is that sometimes the first request executes after the second. And the second depends on the first, so I'm getting an error.
How could I solve this?

Answer 1

Below elaborates a bit more on my comment. Here we would initialize both promises inside the DataRows service (through call to initData from MainController). The SubController is no longer dependent on MainController, but just the fact that something else has called initData. If something else hasn't called that function, then you will get console errors for calling "then" on undefined object.
I also used $timeout instead of $http to mock out async work. I don't know what your data looks like, so I just made an array of strings, you should be able to adapt.
angular.module('myApp', [])
// Using $timeout instead of $http for demo
.service('DataRows', function ($http, $q, $timeout) {
var someData,
anotherThing;
this.initData = function () {
// actual call. get rid of $timeout line in actual code
// someData = $http.get('/foo/ajaxGetSomeData/').then(function (response) {
someData = $timeout(function () { return {data: ['parentRow1', 'parentRow2', 'parentRow3']}; }, 1500).then(function (response) {
return response.data;
});
anotherThing = someData.then(function (parentRows) {
// actual call. get rid of $timeout line in actual code
// return $q.all([parentRows, $http.get('/bar/ajaxGetAnotherThing/')]);
return $q.all([parentRows, $timeout(function () {return {data: ['childRow1', 'childRow2', 'childRow3']}}, 1500)]);
}).then(function (promises) {
var parentRows = promises[0],
response = promises[1];
// from your original code -- merge is not available here. Mocking concatted rows from first call
// return parentRows.merge(response.data);
return parentRows.concat(response.data);
});
};
this.getSomeData = function () {
return someData;
};
this.getAnotherThing = function () {
return anotherThing;
};
})
.controller('MainController', function ($scope, DataRows) {
// initData first so both promises are ready
DataRows.initData();
// getSomeData is the first promise (call to /foo/ajaxGetSomeData)
DataRows.getSomeData().then(function (rows) {
$scope.rows = rows;
});
})
.controller('SubController', function ($scope, DataRows) {
// getAnotherThing is the second promise that depends on the first (/bar/ajaxGetAnotherThing)
DataRows.getAnotherThing().then(function (newRows) {
$scope.rows = newRows;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
<div ng-repeat="row in rows">
{{row}}
</div>
<div ng-controller="SubController">
<div ng-repeat="row in rows">
{{row}}
</div>
</div>
</div>