AngularJS change css property value

Question

Following are my html snippet:

<div class="pay row-0 col-1 ">
        <div class="t-middle f26 f-white row-0 " style="position:absolute;top:50%;">please wait...</div>
</div>

And the stylesheet for .pay class are as follow:

.pay, .stopIE {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    top: 0;
    display: none;
}

When a button is clicked, the following function is executed.

$scope.goBuy = function(){
    Account.buyNow({"pid": $scope.buypp.id})
        .then(function(response){
            [change the .pay class display to block]
            $window.location.href = response.data;
        })

        .catch(function(response){

        })
}

While waiting for the response, how can I change the .pay class display property value from none to block. Thanks!!

Answer 1

I would simply use ngShow/Hide for such things with a proper scope variable. For more control (if you need), you can also use ngStyle or ngClass (preferrably).