angular js default checked radio button

Question

I know this has probably been asked many times before and I have been through the solutions but none seemed to have worked for me...

html file:

<input id="sampleA" name="try" type="radio" data-ng-model="$ctrl.isSampleA" value="true" data-ng-change="$ctrl.update()"></input>
<label for="sampleA">Sample A</label>
<input id="sampleB" name="try" type="radio" data-ng-model="$ctrl.isSampleA" value="false" data-ng-change="$ctrl.update()"></input>
<label for="sampleB">Sample B</label>

js file:

//Initialization:
vm.isSampleA = false;
//This function returns the correct boolean value returned by API
    vm.update = function() {
    vm.isSampleA = response.rows["0"].sampleA;
};

Briefly I'll explain the flow: The default check initially is 'Sample B' option. Then the user checks 'Sample A' option and sends the updated value to REST API, where it gets updated correctly. Next when I want to edit this form again:

Expected: 'Sample A' should be checked

Actual: none of the 2 options are checked, even though the value of 'isSampleA' is true.

Answer 1

Use ng-value directive instead of plain value attribute:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script>
  angular.module('app', [])
</script>

<div ng-app='app' ng-init='test=true'>
  <label>
    <input type="radio" ng-model="test" ng-value="true">
    One
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="test" ng-value="false">
    Two
  </label>
  <br/>
  <button ng-click='test = !test'>Click</button>
</div>