Issue making a "Loading..." text for a widget.

Hi,

I've made a custom widget for retrievieng some information about a case using the $http service (XHR) from AngularJS.

The widget loads successfully the data but it appears by parts (since it loads) then I put a div with te directive ngShow for showing a "loading..." text while the data is loading.

Well, that it works partially, because, randomly, it stuck with the "loading..." text.

Here is the controller code:

function MyCtrl($scope, $http) {
$scope.caso = $scope.properties.caso;
$scope.noOK = false;
if ($scope.properties.tipo == "E") {
$http.get('/bonita/API/bpm/caseVariable/'+$scope.properties.caso+'/var_ent_fechaLim/').then(function (response) {
$scope.cargando = $http.pendingRequests.length === 0;
$scope.rdf = response.data;
}), function(response) {
$scope.cargando = true;
$scope.noOK = true;
};
$http.get('/bonita/API/bpm/caseVariable/'+$scope.properties.caso+'/var_ent_portal_descTarea/').then(function (response) {
$scope.cargando = $http.pendingRequests.length === 0;
$scope.rdd = response.data;
if ($scope.rdd.value !== "") {
$scope.desc = $scope.rdd.value;
} else {
$scope.desc = "Sin inicializar.";
}
}), function(response) {
$scope.cargando = true;
$scope.noOK = true;
};
} else {
$http.get('/bonita/API/bpm/caseVariable/'+$scope.properties.caso+'/var_sal_fechaLim/').then(function (response) {
$scope.cargando = $http.pendingRequests.length === 0;
$scope.rdf = response.data;
}), function(response) {
$scope.cargando = true;
$scope.noOK = true;
};
$http.get('/bonita/API/bpm/caseVariable/'+$scope.properties.caso+'/var_sal_portal_descOficio/').then(function (response) {
$scope.cargando = $http.pendingRequests.length === 0;
$scope.rdd = response.data;
if ($scope.rdd.value !== "") {
$scope.desc = $scope.rdd.value;
} else {
$scope.desc = "Sin inicializar.";
}
}), function(response) {
$scope.cargando = true;
$scope.noOK = true;
};
}
$scope.cargando = $http.pendingRequests.length === 0;
}

Here is the template code:

<div ng-show="{{ !cargando }}">
<p>Cargando...</p>
</div>
<div ng-show="{{ cargando }}">
<blockquote>
<h5>{{ desc }}, <b>Vence: {{ rdf.value | date }}.</b></h5>
</blockquote>
</div>
<div ng-show="{{ noOK }}">
<p>Error no se pudo cargar :(</p>
</div>

How can I fix this?, I hope you can help me. Thanks in advance.