title: Radio Buttons ng-checked with ng-model
body: <p>In my HTML page, I have two sets of Boolean based radio buttons: Labeled: "Yes" and "No" / Values: <em>True</em> and <em>False</em> respectively. I'm populating a full form from a PostgreSQL database table to allow the authenticated user to view the form with populated data and edit the populated fields including the radio buttons, then save the form which will save the data to the DB. All of the other text fields populate without issue; it's both collection of radio buttons I am having an issue with pre-checkmarking the radio buttons. </p>
  
  <p>The below does not pre-populate the checked on front end (but adds the correct attribute of <em>checked</em> in HTML source):</p>
  
  <pre><code>    &lt;input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" /&gt;
      &lt;input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" /&gt;
  </code></pre>
  
  <p>However, this does check the correct radio button on load:</p>
  
  <pre><code>    &lt;input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" /&gt;
      &lt;input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" /&gt;
  </code></pre>
  
  <p><strong>Note:</strong> I needed to check against the string boolean value in the directive ng-checked since the boolean value always comes back as a string from PostgreSQL. This, apparently, was a part of PostgreSQL's design when querying data from columns that have boolean data types. </p>
  
  <p>When adding the ng-model directive, the radio button no longer is checked (at least in the rendered browser view). The odd part is that I looked at the source and it clearly checks the correct one. What's even more odd, is that I have to click on the radio button <em>twice</em> to 'check' it. I've tested this in latest version of Chrome, FF, and IE and it all results in the same issue. </p>
  
  <p>The question is: when adding the ng-model directive, why would the HTML source add 'checked' in the radio button attribute, but seemingly does not mark the radio button? Furthermore, why would I have to click twice on the radio button that IS supposed to be checked?</p>
  
  <hr>
  
  <p><strong>Solution:</strong>
  To fix this, I removed the ng-checked directive from the radio buttons and only used ng-model as suggested by @Cypher and @aet. I then replaced the attribute <em>value</em> with the directive ng-value "true" &amp; "false". After, I set the values in the controller. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" /&gt;
  &lt;input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" /&gt;
  </code></pre>
  
  <p><strong>Angular JS</strong></p>
  
  <pre><code>app.controller('peopleCtrl', function($scope, peopleFactory){
      ...
      peopleFactory.getPerson(personParams).then(function(data){
          $scope.person = data;
          /* moved from ng-checked */
          $scope.person.billing = data.billing == 'true';
      });
      ...
  };
  </code></pre>