ng-checked='true' not working

Question

Template - 1

<ul>
  <li>
    <label><input type="radio" ng-checked="true" /> One</label>
  </li>
  <li>
    <label ng-click="ctrl.goToTwo()"><input type="radio" /> Two</label>
  </li>
<ul>

Template - 2

<ul>
  <li>
    <label ng-click="ctrl.goToOne()"><input type="radio" /> One</label>
  </li>
  <li>
    <label><input type="radio" ng-checked="true" /> Two</label>
  </li>
<ul>

In above html, I am just redirecting user to template 1 to template 2 with the help of radio buttons.

Question I have clearly mentioned ng-checked=true in one the radio button in both templates. But i dont know why they both are coming unchecked while loading.

Please let me know if I am missing something and or need to do something else.

note: I have tried playing with ng-model='one' and vm.type='one' but its not working.

Answer 1

you have to add a "value" to the "radio" input

<input type="radio" ng-model="myRadio" value="1" />

later in your code

$scope.myRadio = "1" // check radio
$scope.myRadio = "0" // radio not checked

Demo:

https://codepen.io/anon/pen/QvKNOQ