Spinner Loading with AngularJS - angularjs

Question

I wanted to make Spinner should appear when user clicks on Submit Button and Spinner should stop once the AJAX POST and GET request completed
Can you Please help me know How I make my below Angular Code to implement the feature.
Below is the Example I saw for Spinner in Angular
Demo
Below is my AngularJS code .
var app = angular.module("myApp", ["ngTable"]);
app.controller("Controller", ["$scope", "$http", "$window",
function ($scope, $http, $window) {
$scope.firstFunction = function () {
$http({
method: 'POST',
url: 'mainDeviceSite.php',
//headers : {'Content-Type':'application/x-www-form-urlencoded'},
data: {
accountnumber: $scope.accountnumber
},
}).then(function (response) {
var data = response.data;
$scope.post = response.data;
$scope.cellularIPAddressValue = response.data.devices;
console.log($scope.cellularIPAddressValue);
//$scope.secondFunction(data);
}, function (error) {
var data = error.data;
console.log("Error" + data);
})
}
$scope.secondFunction = function () {
$http({
method: 'POST',
url: 'BEPEvents.php',
//headers : {'Content-Type':'application/x-www-form-urlencoded'},
data: {
accountnumber: $scope.accountnumber
},
}).then(function (response) {
var data = response.data;
$scope.post = response.data;
var x2js = new X2JS();
$scope.aftCnv = x2js.xml_str2json(response.data);
$scope.bepValues = $scope.aftCnv.EEPEvents.BlobData;
console.log($scope.bepValues);
}, function (error) {
var data = error.data;
console.log("Error" + data);
})
}
}
]);
HTML Code
<div class="example">
<div class="col-md-12">
<div class="row">
<div class="input-group form-search">
<input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
<span class="input-group-btn">
<button type="submit" ng-click="firstFunction();secondFunction()" class="btn btn-primary">Submit</button>
</span>
<span id="message">{{message}}</span>
</div>
</div>
</div>
</div>

Answer 1

Try Following solution
This applicable for all http request that are use in angular controller. When you call http request then spinner and progress bar you shows
Demo
Refer this angular-loading-bar.
include the loading bar as a dependency for your app. If you want animations, include ngAnimate as well. note: ngAnimate is optional
angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])
include the supplied JS and CSS file (or create your own CSS to override defaults).
<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>
Hope this is help you