NG-STYLE with custom condition not firing

Question

I have the following item in a remote datasource (greatly simplified)

[
{
    "id": "3",
    "card_name": "Free Beer!",
    "count": "1"
}

]

I have a DIV with an NG-REPEAT (again greatly simplified)

<div ng-repeat="card in cardDetails">
 <h1>{{card.card_name}}</h1>
 <button ng-style="set_hide(card)">Claim Me</button>
</div>

and the following in my controller

    $scope.set_hide = function (card) {
    if (card.count > 0) {
        return { display:none }
    } else {
        return { display:block }
    }
}

so basically if the count of this card is not zero (1+) the button is supposed to display:none and vanish

The rest of the info (ie the card name) renders as expected and if I also add {{card.count}} that shows as 1 as expected

but nothing happens, at all. No errors, just nothing

Why is my ng-style not firing

Thanks in advance for any guidance

Answer 1

If you just need to hide the button. A simpler way to do this will be not to use function set_hide().

You can just insert ng-hide attribute to the button element.

<button ng-hide="card.count > 0">Claim Me</button>