ng-disabled not working with bootstrap buttons

Question

I am using bootstrap.js along with angular js, my code is following-

//few lines from controller
$scope.isWaiting = true;
$scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-source&filterVal=" + traffic + "&from=" + from + "&to=" + to + "&tz=" + tz).success(function(response){        
        $scope.campaigns = response.rows;
        console.log(response.rows);
        $scope.isWaiting = false;
    }).error(function(response){
        alert(response);
        $scope.isWaiting = false;
    });

Here isWaiting is used for disabling and enabling the button.

<!--HTML -->
<div class="col-md-3">
        <button class="btn btn-warning" ng-disabled="{{isWaiting}}">Report</button>
    </div>

Output HTML produced before ajax load completed

<button class="btn btn-warning" ng-disabled="true" disabled="disabled">Report</button>

And after ajax load completed

<button class="btn btn-warning" ng-disabled="false" disabled="disabled">Report</button>

And button is still disabled. I am not sure why is this happening, I have seen couple of questions here answered to do this only.

Thanks in advance.

Answer 1

If you are using ng-disabled an expression must be used that returns a truthy value. An example of an expression is isWaiting. {{isWaiting}}will instead output an expression. So instead use ng-disabled="isWaiting".

<button class="btn btn-warning" ng-disabled="isWaiting">Report</button>

ngDisabled documentation

Expressions documentation