ng-click и ng-disabled, чтобы сделать функцию «добавить в корзину»

Мне нужна помощь, динамически включающая и отключающую мою кнопку "добавить в корзину", но сейчас, когда я нажимаю "добавить в корзину", она не отключает кнопку сразу, но я должен щелкнуть по пустому холсту, чтобы отключить его.

HTML

<div id="shoppingCart">
    <form name="addItemsForm" method="POST">
        <input type="hidden" name="type" value="Package" />
            <ul>
                <li ng-repeat="df in item.delivery_formats">
                    <button type="button" name="addToCartBtn" id="{{df.price_id}}" 
                     value="{{df.price_id}}" class="btn btn-default" ng-model="$parent.addToCartBtn" 
ng-click="addToCart(df.price_id, df);" ng-disabled="checkBtnState(df.button_state)"/> <span class="fa fa-shopping-cart" style="float: left;"></span>  <strong>{{df.delivery_format}} -  ${{df.price}}</strong>

                    </button>
                </li>
            </ul>
    </form>
</div>

Угловая и JS

$scope.checkBtnState = function(btn_state){
  if(btn_state == 'disabled') {
    return true;
  }
  else {
    return false;
  }
}
$scope.addToCart = function(id, dfObj){
  $http({
    url: "/shop/add.php",
    method: "POST",
    data: {id: id}
  })
  .success(function(){
    $('#cart').load('/php/cart-items.php');
    dfObj.button_state = 'disabled';
  })
  .error(function(){
    alert('error');
  });
}