title: Have to click radio button twice for html element to change using AngularJS
body: <p>I have a very simple form where I have Yes and No radio buttons. Each radio button is bound to the same item in the scope (I am using AngularJS). The Yes button's value gets set to true on being selected and the No button's value gets set to false when being selected.</p>
  
  <p>When I click the Yes button once, both the model and the html element changes correctly. But when I click the No radio button, the model changes correctly but the html element does not become selected. If I click the No radio button again the html element then changes to it's correct selected state. </p>
  
  <p>The example below is just part of a larger html page and controller but I have kept the Angular model structure the same because this may be where the issue is. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div ng-conroller="MyController"&gt;
      &lt;div&gt;
                  &lt;label&gt;
                      &lt;input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="item.isBeingPaid" value="true"/&gt;
                      Yes
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="radio"&gt;
                  &lt;label&gt;
                      &lt;input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="!item.isBeingPaid" value="false"/&gt;
                      No 
                  &lt;/label&gt;
                  &lt;p&gt;{{item.isBeingPaid}}&lt;/p&gt;
              &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>var app = angular.module('myApp', [
    'my.controllers'
  ]);
  
  var controllers = angular.module('my.controllers', []);
  controllers.controller('MyController', function($scope) {
      $scope.item = {};
  });
  </code></pre>
  
  <p>I have created this fiddle to demonstrate the issue.</p>
  
  <p><a href="http://jsfiddle.net/prajna78/Tdq9n/14/" rel="nofollow">http://jsfiddle.net/prajna78/Tdq9n/14/</a></p>
  
  <p>What am I missing? It seems like such a simple thing.</p>