Handling multiple radio buttons - angularjs

Question

Here "idDefault" values are not changing. Please help me.
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-value="true" ng-model="color.idDefault">
{{color.colorName}} </input>
</div>
Colors : {{colorlist}}
and my JSON is
$scope.colorlist = [
{
colorName:'Black',
idDefault:true},
{
colorName:'Red',
idDefault:false} ,
{
colorName:'Bule',
idDefault:false} ,
{
colorName:'Yellow',
idDefault:false} ,
];
Initially black is selected. When selecting other colors, Black isDefault value not changing to false.

Answer 1

First of all as you are using color list for radio buttons , its the way for Checkbox list . But if you wanna use it like this only , you can do it by adding a ng-change in it like -
View Code-
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-change="changed(color)" ng- value="true" ng-model="color.idDefault"/>
{{color.colorName}}
</div>
Colors : {{colorlist}}
and in controller add a method -
$scope.changed=function(color){
for(var i=0;i<$scope.colorlist.length;i++)
if($scope.colorlist[i].colorName!==color.colorName){
$scope.colorlist[i].idDefault=false;
}
}
Check the fiddle
hope it will work for you.

Answer 2

The method that you are trying to use above is used for checkboxes where you can select multiple value but here you want only one color to be selected at time.
You can this as,
<div class="form-group" >
<label class="control-label">Select Colors : </label>
<div ng-repeat = "color in colorlist">
<input type="radio" name="color" ng-value="color" ng-model="selectedColor">
{{color.colorName}}
</input>
</div>
This way you can get the selected color in your contoller in $scope.selectedColor variable.