How to display form submission status in AngularJS

I started to look into Angular JS and find this framework great so far.

I have a question about form submission best practices though.

I have an update data form which has ng-controller and ng-submit directives, it loads data from the server using get on load and posts data on submit.

My question is when a user clicks submit button how do I indicate that something is actually happening? E.g. display activity indicator while the action is being processed and some kind of success or failure message after it was processed.

I used jQuery to do this for ajax forms before, do I still use jQuery or there are other tools for that in Angular JS I don't know about?

Thanks

Solution

Working with AJAX promises in angular is much straight forward. Have a look at this post. While your request is being processed, you could show a loading icon/text whatsoever:

$scope.loading = true;
$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.success(function(data, status, headers, config) {
    $scope.data = data;
    $scope.loading = false;
}).error(function(data, status, headers, config) {
    $scope.status = status;
    $scope.loading = false;
});

Then just hide and show whatever indicates your loading status:

<p ng-show="loading">LOADING</p>