Show progress circular during $http post?

Question

What is the best way to use Angular Material\'s Progress circular component with a $http request?

I currently have the code like this below:

Progre

Answer 1

All answers are right just add one more thing that $http request is asynchronous you should use like this

$scope.$apply(function(){
$scope.isLoading = false;
});

And as whole like this

And in your JS

$scope.isLoading = true;

$http.get("/posts")
   .success(function (data) {
         $scope.$apply(function(){
           $scope.isLoading = false;
         });
   });

Note:- Source of the answer is the accepted answer.