I am facing a situation where I need to populate an array with values when a checkbox is checked within an ng-repeat iteration.
<li ng-repeat="player in team.players">
<div class="row">
<div class="col-md-3 m-t-xs">
<input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
</div>
<div class="col-md-5 m-t-xs">
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
</label>
</div>
</div>
</li>
This is how it appears in the browser at the moment.
https://i.sstatic.net/gnPHZ.png
The problem arises when I click on any player name in the FC Barcelona Accordion, as it also selects the player with the same index from the FC Bayern Munich Accordion. What I aim for is to maintain the separation of all players individually. Is there something missing in the binding process?