How to change selected radio box with Angularjs - angularjs

Question

Here is the part of the code for radio box
<div class="row">
<div class="col-sm-10">
<div>
<label ng-click="setGroup(true)">
<input type="radio" id="groupNamId" name="quality[21]" checked="checked" ng-value="isGroupName" /> Group Name
</label>
<label ng-click="setGroup(false)">
<input type="radio" id="Distinguished1" name="quality[21]" ng-value="!isGroupName" /> DN Name
</label>
</div>
</div>
</div>
Now the radio box is checked on "Group Name" but I want the radio box is checked on either Group Name or DN Name basing on the isGroupName. So if isGroupName = true then Group Name radio box is checked and if isGroupName=false then DN Name radio box is checked. Any suggestion for changing the radio checked on isGroupName? I have use ng-checked but it didn't work.
Thanks,
Kim

Answer 1

You should us ng-model to manage your radio with angular properly.
<div class="row">
<div class="col-sm-10">
<div>
<label ng-click="setGroup(true)">
<input type="radio" id="groupNamId" name="quality[21]" ng-model="isGroupName" value="Group" /> Group Name
</label>
<label ng-click="setGroup(false)">
<input type="radio" id="Distinguished1" name="quality[21]" ng-model="isGroupName" value="DN" /> DN Name
</label>
</div>
</div>
</div>
And in your controller :
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.isGroupName = "DN";
}]);
</script>
With ng-model, no need to a boolean isGroupName ... Angular will automaticaly ind proper value based on your data. No error possible like forgetting keep your boolean sync.
This Plunker explain well how it works : http://plnkr.co/edit/vjryMq3SbJEdhSjiqZ9U?p=preview