loading or progress screen appear on click event - angularjs

Question

I want when click on switchery button the loading screen appear or modal and this loading screen or modal will dismiss only when http request completed and get all data.In short when click on switch then user cannot perform any action and cannot click on other buttons.so how can i do this.I'm using angular with laravel 5.2
<div class="table-responsive">
<table class="table table-hover ">
<thead>
<tr>
<th>Device Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="device in devices">
<td>[[device.device_name]]</td>
<td>
<switch id="enabled" name="enabled" on="ON" off="OFF"
ng-init="enabled=device.status" ng-model="enabled" class="green "
ng-change="changeStatus([[device.device_id]],[[device.user_id]],enabled)"
></switch>
</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
Angular file
myapp.controller('AutomationController',function(dataFactory,$scope){
$scope.devices;
$scope.userId=null;
loadDevices();
function loadDevices()
{
dataFactory.httpRequest('/user_devices').then(function (data) {
console.log(data);
$scope.devices=data;
})
}
$scope.changeStatus=function($device_id,$user_id,$status){
if($status)
{
$status=1;
}
else {
$status=0;
}
dataFactory.httpRequest('/device_status/'+$device_id,'PUT',{},
{"user_id":$scope.userId,
"status":$status
}).then(function(data) {
});
}
});

Answer 1

Before making your $http request, set $scope.loading = true; and in your promise's finally(function(){}); set $scope.loading = false;
In your HTML template, add something like <div class="modal loading" ng-if="loading">Loading...</div>. Use CSS to make it take up whole screen and have higher z-index so it blocks clicks on the rest of UI.