In the javascript controller, I have a code snippet that consists of two separate functions. While these functions work individually and asynchronously when triggered from the view, my goal is to execute them synchronously on page load. This is necessary because the output of the first function is utilized as input for the second function.
$scope.function1= function () {
$http({
url: '/Class/method1/',
method: 'GET'
}).success(function (data) {
$scope.mygrid= data.data;
$scope.myvalue= $scope.mygrid[0];
});
};
$scope.function2= function () {
$http({
url: '/class/method2/',
method: 'POST',
params: { myValue: $scope.myvalue }
}).success(function (data) {
$scope.myValue2 = data.data;
});
};
var initialize = function () {
var defer = $q.defer();
defer.promise
.then(function() {
$scope.function1();
})
.then(function() {
$scope.function2();
})
defer.resolve();
};
initialize();
However, during the execution of the second function call, the value of $scope.myvalue becomes null even though data was returned from function one. My suspicion is that function2 might be getting called prematurely. Could someone provide some guidance on this? :-)