AngularJS - ng-show not showing div tag conditionally?

Question

I am trying to show a div tag on a form based on the boolean flag that is specified in ng-show. But the div is not displaying at all. Below is what I tried and it is not working. Thanks for any help!

Form control in MVC View:

<form name="payment" role="form" ng-submit="sendPayment()" ng-controller="PaymentCtrl">
        <div id="veil" ng-show="isProcessing == true"></div>
        <div id="feedLoading" ng-show="isProcessing == true">
            <img src="~/images/ajax_loader_blue_64.gif" class="img-responsive center-block" />
        </div>

        //Other form controls here
</form>

In Angular controller: This controller is same as the one the form is using which is "PaymentCtrl".

$scope.isProcessing = false;

    $scope.setProcessing = function (loading) {
        $scope.isProcessing = loading;
    }

    $scope.sendPayment = function () {
        $scope.setProcessing(true);
        //Other logic here
        $scope.setProcessing(false);
    };

CSS Styles for div tags:

#veil {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
cursor: not-allowed;
filter: alpha(opacity=60);
opacity: 0.6;
background: #000000 url(http://www.wingo.com/angular/AngularShieldLogo.png) no-repeat center;
}

#feedLoading {
position: absolute;
top:200px;
width:100%;
text-align: center;
font-size: 4em;
color:white;
text-shadow: 2px 2px 2px #021124;
}

Answer 1

Your sendPayment is probably making an asynchronous service call which is waiting to be resolved via a promise. Your isProcessing boolean is being toggled immediately back at the end of the function's execution. No matter when your promise actually resolves, your boolean has already been changed.

You should instead reset your isProcessing boolean after your promise comes back. Make sure to reset it in both the success and error callback functions. For example, if your code is using a promise:

service.sendPayment() 
    .then(function() {
            $scope.setProcessing(false);
        },
        function(error) {
            $scope.setProcessing(false);
        });

Or if you are using $http in your controller, you can use the wrapped .success and .error callbacks:

$http.post(url, data) 
    .success(function () {
        $scope.setProcessing(false);
    })
    .error(function (error) {
        $scope.setProcessing(false);
    });