Radio button group validation inside angular ng-repeat - angularjs

Question

I am trying to implement radio button group validation inside angular's ng-repeat.
HTML
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>
Name attribute should change in each repeat. I tried appending $index value, but it's not working properly when drivers are dynamically added and removed. What is the best way to implement this?

Answer 1

In your code all radio buttons will relate with each other, because name attribute of all is the same. You should identify each radio buttons group. For example:
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>

Answer 2

Just try this If you need like below
Think their is two repeats in model, then code of the view should be like this
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>
So this is the code for get this
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>

Answer 3

you can change name attribute based on index value , can you check out my answer in following link
In controller
$scope.drivers = [{id:1,name:'test',gender:'M'}];
In html
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>
https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview

Answer 4

Finally I found one solution.
<div ng-repeat="driver in drivers">
<div ng-form="radioForm">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
{{radioForm.$error}}
</div>
</div>
Now the validation in happening thorugh the ng-form. Radio buttons will be grouped because $index.