ng-show={{d.xbox}} doesn't resolve to true although d.xbox exists, why?

Question

<div ng-controller="ctrl" >
       <div class = "allcontent">
            <div class="userCard" ng-repeat="d in data">
               <img class="cardImage" src="../../public/assets/dota2.png">
               <h3 class="cardUsername">{{d.username}}</h3>
               <span class="cardDescription">{{d.description}}</span>
                <div class="cardSocialIcons">
                    <a ng-show={{d.showEmail}}><img class="cardMail" src="../../public/assets/mail.png"></a>
                    <a target = "_blank" href={{d.facebook}} ng-show={{d.facebook}}><img class="cardMail" src="../../public/assets/facebook.png"></a>
                    <a target = "_blank" href={{d.steam}} ng-show={{d.steam}}><img class="cardMail"   src="../../public/assets/steam.png"></a>
                    <a target = "_blank" href={{d.xbox}} ng-show= showXboxIcon({{d.xbox}}) ><img class="cardMail" src="../../public/assets/xbox.png"></a>
                    <a target = "_blank" href={{d.psn}} ng-show=showPsnIcon({{d.psn}}) ><img class="cardMail" src="../../public/assets/psn.png"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    function showXboxIcon(xbox) {
        if (xbox != "" && xbox != null && xbox != undefined) {
            return true;
        }
        else {
            return false;
        }
    }

    function showPsnIcon(psn) {
        if (psn != "" && psn != null && psn != undefined) {
            return true;
        }
        else {
            return false;
        }
</script>

I want to show an icon related to the gaming network a user uses with a link to his profile on said network, but only if the user has an account on that network.

In this case: d.xbox and d.psn exist, so the icon should be shown to the user.

That is not the case, what mistake have I made ?

(Most certainly a simple syntax error)

Answer 1

Do not need to {{}} so change to this ng-show="showXboxIcon(d.xbox)"