How to show a spinner until the result is back from the server

Question

I'm using ng-file-upload to upload multiple files to the server. The server responds back after a while (~10 seconds). In this time I would like to show a spinner on the screen.

I'm currently showing a spinner like this

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>

but it is there permanently. How can I make it so that it appears only for the time until the response is back from the server?

my upload code follows:

        Upload.upload({
            url: 'http://localhost:8080/myapp',
            data: {
                files: files
            }
        }).then(function (response) {
            $timeout(function () {
                $scope.result = response.data;
                $scope.text = response.data.text;
                $scope.notext = response.data.notext;
            });
        }, function (response) {
            if (response.status > 0) {
                $scope.errorMsg = response.status + ': ' + response.data;
            }
        }, function (evt) {
            $scope.progress = 
                Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });

Answer 1

If I got you right...

html:

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif" ng-hide="loaderHidden"/>   

js:

$scope.loaderHidden = true;

function upload() {

   $scope.loaderHidden = false;
   Upload.upload({
            url: 'http://localhost:8080/myapp',
            data: {
                files: files
            }
        }).then(function (response) {
            $timeout(function () {
                $scope.loaderHidden = true;

                $scope.result = response.data;
                $scope.text = response.data.text;
                $scope.notext = response.data.notext;
            });
        }, function (response) {
            if (response.status > 0) {
                $scope.errorMsg = response.status + ': ' + response.data;
            }
        }, function (evt) {
            $scope.progress = 
                Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
}

then just call upload()