Angular overlay (spinner) when we have multiple request - angularjs

Question

I have below HTML panel and binds to the controller, in the controller I have 4 calls to server to get my data, my question is how can I show spinner or overlay on top of this panel until all the requests to the server are resolved and I can show the data smoothly.
<div class="container-fluid margin10 padding10 myPanel">
<div class="row-fluid name" ng-bind-html="viewData.msg.name"></div>
<div class="row">
<div class="col-md-11">
<div ng-bind-html="'• ' + (viewData.msg.filtersStr | limitTo: 140) + (viewData.msg.filtersStr.length > 140 ? '...' : '')" ng-attr-title="{{viewData.msg.filtersTooltipStr}}"></div>
</div>
</div>
<div class="row top-buffer-margin">
<div class="col-md-4 text-right">
<div class="col-md-8"><span class="font10" translate="msgs.details.confidence"></span>:</div>
<span ng-bind-html="viewData.msg.severity" ng-class="viewData.msg.severityColor" class="font10 col-md-4 confidence-span"></span>
</div>
</div>
<hr>
<table class="table-striped col-md-12 top-buffer-margin">
<thead>
<tr>
<th class="col-md-3"></th>
<th class="col-md-2 text-center" ng-bind-html="'<i>' + ('msgs.details.countColHead' | translate) + '<i>'"></th>
<th class="col-md-4 text-center" ng-bind-html="'<i>' + ('msgs.details.dynamicCalculation' | translate) + '<i>'"></th>
<th class="col-md-3 text-right" ng-bind-html="'<i>' + ('msgs.details.CalculationColHead' | translate) + '<i>'"></th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number1"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number1.dynamicCount "></span>
</td>
<td class="col-md-4 text-center" >
<span ng-bind="viewData.msg.number1.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewData.msg.number1.percentageCalculation > 0 ? '+' : '') + viewData.msg.number1.percentageCalculation + '%'">
</td>
</tr>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number2"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number2.dynamicCount "></span>
</td>
<td class="col-md-4 text-center">
<span ng-bind="viewData.msg.number2.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewData.msg.number2.percentageCalculation > 0 ? '+' : '') + viewData.msg.number2.percentageCalculation + '%'">
</td>
</tr>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number3"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number3.dynamicCount "></span>
</td>
<td class="col-md-4 text-center">
<span ng-bind="viewData.msg.number3.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewata.msg.number3.percentageCalculation > 0 ? '+' : '') + viewData.msg.number3.percentageCalculation + '%'">
</td>
</tr>
</tbody>
</table>
</div>
The controller is like this:
(function() {
'use strict';
angular.module('myApp')
.controller('myController', myController);
/** #ngInject */
function myController($scope, BinsResource, msgEvents, appConstants) {
var msg = null;
$scope.viewData = {msg: {}};
var init = function() {
}
var getMsgDetails = function() {
msg = $scope.selectedMsg;
//
$scope.viewData.msg = {
ruleName: msg.ruleName,
date: moment.utc(msg.time).format('YYYY-MM-DD'),
time: moment.utc(msg.time).format('HH:mm'),
severity: msg.severity,
severityColor: msgsService.getSeverityClassColor(msg.severity, appConstants),
number1: buildEventsData(msg, appConstants.measureType.number1),
number2: buildEventsData(msg, appConstants.measureType.number2),
number3: buildEventsData(msg, appConstants.measureType.number3)
};
var params = prepareDataForBinsHttp(msg);
//number1
BinsResource.post('number1', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number1.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number1.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
//number2
BinsResource.post('number2', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number2.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number2.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
//number3
BinsResource.post('number3', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number3.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number3.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
}
//
$scope.subscribe(msgEvents.message._ALERT_ITEM_SELECTED_, function(selectedMsg){
$scope.selectedMsg = selectedMsg;
if(selectedMsg != null){
getMsgDetails();
}
});
init();
};
})();
I want my HTML be blocked until getMsgDetails() does all its calls to server and calculation and was ready to populate the HTML, how can I do this?

Answer 1

I think your best option, is to use the following angular library
https://github.com/McNull/angular-block-ui
It will display a spinner, or a loading message, until all the promises are solved (it is configurable as well)
Demo here:
http://angular-block-ui.nullest.com/#!/