Conditional ng-class style applies to all divs - css

Question

I have a list of card numbers for a patient that displays on a modal. If the card is set to be the default card then it should have a grey background - this is based on a value of true for the object.
<td ng-repeat="obj in paymentAndShipping">
<div ng-click="setDefaultPaymentMethod(obj.ElectronicPaymentAccountType, obj.ElectronicPaymentAccountID)" ng-class="{'chosencard' : obj.PreferredAccount }">
<span ng-show="obj.PreferredAccount" class="glyphicon glyphicon-ok"></span>
<p>{{obj.ElectronicPaymentAccountType}} {{trimCardNum(obj.CreditCardNumber)}}</p>
<p>Exp: {{obj.ExpirationDate}}</p>
</div>
</td>
Important piece:
ng-class="{'chosencard' : obj.PreferredAccount }"
Relevant CSS:
.chosencard {
background-color: #gray-lighter;
}
Here you can see that I iterate over the array and retrieve the objects using an ng-repeat and then apply an ng-class on the div inside the table cell to determine if the style is applied. The odd thing is that I do the same exact thing on the span inside the div and it reacts as I expect but the actual div doesn't - why is that?
Here's a screenshot of the behaviour.
P.S. When I click on an individual div the grey background disppears from all the others except the div that I clicked on. And of the four objects that you see above only one of them has a value of true and that's the last card.

Answer 1

I can't see how you selecting payment methods but you can do that like in demo below.
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.paymentAndShipping = [
{
ElectronicPaymentAccountType: "a",
CreditCardNumber: "155652",
ExpirationDate: "01/01/2014",
ElectronicPaymentAccountID: 1
}, {
ElectronicPaymentAccountType: "b",
CreditCardNumber: "155652",
ExpirationDate: "01/11/2014",
ElectronicPaymentAccountID: 2
}, {
ElectronicPaymentAccountType: "c",
CreditCardNumber: "1545652",
ExpirationDate: "21/01/2414",
ElectronicPaymentAccountID: 3
}, {
ElectronicPaymentAccountType: "d",
CreditCardNumber: "1554652",
ExpirationDate: "31/01/2024",
ElectronicPaymentAccountID: 4
}
];
$scope.PreferredAccount = $scope.paymentAndShipping[0];
$scope.setDefaultPaymentMethod = function(index) {
$scope.PreferredAccount = $scope.paymentAndShipping[index];
}
});
.chosencard {
background-color: yellow;
}
td {
border:solid 1px grey
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<table>
<tr>
<td ng-repeat="obj in paymentAndShipping">
<div ng-click="setDefaultPaymentMethod($index)" ng-class="{'chosencard' :PreferredAccount==obj }">
<span ng-show="obj.PreferredAccount" class="glyphicon glyphicon-ok"></span>
<p>{{obj.ElectronicPaymentAccountType}} {{obj.CreditCardNumber}}</p>
<p>Exp: {{obj.ExpirationDate}}</p>
</div>
</td>
</tr>
</table>
<h3>PreferredAccount :</h3> {{PreferredAccount | json }}
</div>
</div>