Why list become empty outside the method in Angular js - angularjs

Question

I am using angular js and I have a get method '$scope.getAllEmployeesList'. In this method I put the response data into the '$scope.employeeList'. However, list contains data only inside the method but it become empty outside the get method.
Here is my code:
var app = angular.module('app', []);
app.controller('basicInfoController', function ($scope, $http, $location) {
$scope.submitForm = function () {
var url = "http://localhost:8080/basicInfo/save";
var data = {
employeeId: $scope.employeeId,
firstName: $scope.firstName,
lastName: $scope.lastName,
companyId: $scope.companyId,
phoneNo: $scope.phoneNo,
sexId: $scope.sexId,
sexName: $scope.sexName,
birthDate: $scope.birthDate,
joiningDate: $scope.joiningDate,
department: $scope.department
};
$http.post(url, data).then(function (response) {
$scope.postResultMessage = "Sucessful!";
$scope.successMessage = 'User created successfully';
}, function (response) {
$scope.postResultMessage = "Fail!";
});
$scope.employeeId = "";
$scope.firstName = "";
$scope.lastName = "";
$scope.companyId = "";
$scope.phoneNo = "";
$scope.sexId = "";
$scope.sexName = "";
$scope.birthDate = "";
$scope.joiningDate = "";
$scope.department = "";
}
$scope.employeeList =[];
$scope.getAllEmployeesList = function () {
var url = $location.absUrl() + "basicInfo/getAllEmployeeBasicInfo";
var config = {
headers: {
'Content-Type': 'application/json;charset=utf-8;'
}
}
$http.get(url, config).then(function (response) {
$scope.employeeList = response.data;
$scope.employeeList = angular.copy(response.data);
console.log($scope.employeeList);
}, function (response) {
$scope.getResultMessage = "Fail!";
});
}
$scope.getAllEmployeesList();
console.log($scope.employeeList);
function reset() {
$scope.basicInfo = {
employeeId: '',
firstName: '',
lastName: '',
phoneNo: '',
sex: '',
birthDate: '',
companyId: '',
department: '',
joiningDate: ''
};
$scope.myForm.$setPristine(); //reset Form
}
});
in $scope.getAllEmployeesList method, when I print 'console.log($scope.employeeList);' inside the method then it is showing value but if print out side the method then empty list is shown.

Answer 1

Just return the $http... then tack on another .then().
var app = angular.module('app', [])
.controller('basicInfoController', function ($scope, $http, $location) {
function submitForm() {
var url = "http://localhost:8080/basicInfo/save";
var data = {
employeeId: $scope.employeeId,
firstName: $scope.firstName,
lastName: $scope.lastName,
companyId: $scope.companyId,
phoneNo: $scope.phoneNo,
sexId: $scope.sexId,
sexName: $scope.sexName,
birthDate: $scope.birthDate,
joiningDate: $scope.joiningDate,
department: $scope.department
};
$http.post(url, data).then(function() {
$scope.postResultMessage = "Sucessful!";
$scope.successMessage = 'User created successfully';
}, function() {
$scope.postResultMessage = "Fail!";
});
$scope.employeeId = "";
$scope.firstName = "";
$scope.lastName = "";
$scope.companyId = "";
$scope.phoneNo = "";
$scope.sexId = "";
$scope.sexName = "";
$scope.birthDate = "";
$scope.joiningDate = "";
$scope.department = "";
}
$scope.employeeList = [];
function getAllEmployeesList() {
var url = $location.absUrl() + "basicInfo/getAllEmployeeBasicInfo";
var config = {
headers: {
'Content-Type': 'application/json;charset=utf-8;'
}
}
return $http.get(url, config).then(function() {
$scope.employeeList = response.data;
$scope.employeeList = angular.copy(response.data);
}, function() {
$scope.getResultMessage = "Fail!";
});
}
getAllEmployeesList().then(function() {
console.log($scope.employeeList);
});
function reset() {
$scope.basicInfo = {
employeeId: '',
firstName: '',
lastName: '',
phoneNo: '',
sex: '',
birthDate: '',
companyId: '',
department: '',
joiningDate: ''
};
$scope.myForm.$setPristine(); //reset Form
}
$scope.getAllEmployeesList = getAllEmployeesList;
$scope.submitForm = submitForm;
});