Question: In my Angular 1.4.X app, I have some code like this in the controller

```
function submitForm() {
    $scope.submissionInProgress = true;
    myService.veryExpensiveOperation();
    $scope.submissionInProgress = false;
}

```

In the view, I try to use `$scope.submissionInProgress` to show/hide a spinner while `veryExpensiveOperation()` (a synchronous operation) is in progress. 

```
<div ng-show="submissionInProgress" class="spinner">
    Please wait...
</div>

```

However, what actually happens is that the spinner isn't displayed until `veryExpensiveOperation()` has almost completed. In other words, it seems there's a delay of a few seconds between when `$scope.submissionInProgress = true` is called, and when the spinner is actually shown.

Answer: 
Solution
--------

I fixed this using `$timeout` like so:

```
function submitForm() {
    $scope.submissionInProgress = true;

    $timeout(function() {
        myService.veryExpensiveOperation();
        $scope.submissionInProgress = false;
    });
}

```
Then $http requests are **asynchronous**. The value of `$scope.submissionInProgress` gets changed before the request is completed.

If you make an `$http` request you should better toggle `$scope.submissionInProgress` inside the `resolve` function.

e.g.

```
    function submitForm() {

        $scope.submissionInProgress = true;
        myService.veryExpensiveOperation().then(successCallback, failCallback);

        function successCallback() {
          //..Do whatever you have to do and then set the $scope on false.
          $scope.submissionInProgress = false;
        }

        function failCallback() {
          //Same here
          $scope.submissionInProgress = false;
        }

    }

```