How to do $http.get wait response - angularjs

Question

I have a trouble with $http.get. When my service.js access my MVC Controller, the $http.get don't wait for response. How can I do $http.get wait MVC Controller response? My code.
AngularJS Service:
angular.module("cadastroCliente").factory("clientesAPI", function($http) {
var getClientes = function () {
return $http.get("http://localhost:39732/Cadastro/BuscarClientes/");
};
return {
getClientes: getClientes
};
});
ControllerJS - Edited
angular.module("cadastroCliente").controller("cadastroClienteCtrl", function ($scope, $http, $q, $timeout, clientesAPI) {
$scope.app = "Pesquisar Clientes";
$scope.clientes = [];
var carregarClientes = function () {
clientesAPI.getClientes().success(function (data) {
$scope.clientes = data;
}).error(function (data, status) {
$scope.message = "Aconteceu um problema: " + data;
});
};
carregarClientes();
$scope.totalItems = $scope.clientes.length;
$scope.itemsPerPage = 2;
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
$scope.pageCount = function () {
return Math.ceil($scope.clientes.length / $scope.itemsPerPage);
};
$scope.$watch('currentPage + itemsPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredClientes = $scope.clientes.slice(begin, end);
});
});
View:
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped" id="clienteId">
<thead>
<tr>
<th class="col-lg-1">Código</th>
<th class="col-lg-7">Nome</th>
<th class="col-lg-3">Documento</th>
<th class="col-lg-1">Extrato</th>
</tr>
</thead>
<tbody ng-repeat="cliente in filteredClientes">
<tr>
<td>{{cliente.ClienteId}}</td>
<td>{{cliente.Nome}}</td>
<td>{{cliente.CpfCnpj}}</td>
<td style="cursor: pointer"><i class="glyphicon glyphicon-search"></i></td>
</tr>
</tbody>
</table>
</div>
<uib-pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>

Answer 1

You can't set $scope.totalItems until the data has arrived which means you need to set it in the success callback where you assign $scope.clientes from the response data.
$http is an ajax request and the first A in ajax is for "asynchronous"
Note that success and error are deprecated and you should be using the recommendation in documentation to use the promise callbacks then() and catch()

Answer 2

I suggest that you put as much logic pertaining to the request in your factory as possible, including handling the response:
var getClientes = function () {
return $http.get("http://localhost:39732/Cadastro/BuscarClientes/")
.then(function(res) {
return res.data
});
};
Also don't forget that the get request returns the response object, and that you might need to return the data property on the response (if that's what you need).
You should also favor the .then() method on promises.
In es6 we can make this very precise and also catch any errors like so:
var getClientes = () => {
return $http.get("http://localhost:39732/Cadastro/BuscarClientes/")
.then(({data}) => data)
.catch(({data}) => console.log(data.message));
};
In your controller we can then do this:
var carregarClientes = function () {
clientesAPI.getClientes()
.then(function (data) {
$scope.clientes = data;
})
};
In es6:
var carregarClientes = () => {
clientesAPI.getClientes()
.then(data => $scope.clientes = data);
};
EDIT: Response to update code in OP
Unfortunately, anything pertaining to clientes should be done in the callback of the request:
var carregarClientes = function () {
clientesAPI.getClientes()
.then(function (data) {
$scope.clientes = data;
//Assign any other variables
})
};
The reason being, is that all your code in the controller referencing clientes is referencing the original empty array and not the data from the request. This is because it's outside of the call. Therefore, that code is run while the request is being made. If you place it inside the callback it has access to the returned data once it arrives.