title: ng-checked and ng-change radio button not work together - angularjs
body: <p><a href="http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview" rel="noreferrer">http://plnkr.co/edit/RP9SpO1qGjn5Ua6pZJ3D?p=preview</a></p>
  
  <p>js</p>
  
  <pre><code>angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
    $scope.radii = [
      {id:.25, checked:false, name:"1/4 Mile"},
      {id:.5, checked:false, name:"1/2 Mile"},
      {id:1, checked:false, name:"1 Mile"},
      {id:2, checked:true, name:"2 Mile"},
      {id:3, checked:false, name:"3 Mile"},
      {id:4, checked:false, name:"4 Mile"},
      {id:5, checked:false, name:"5 Mile"}
  ];
  
  $scope.handleRadioClick = function(){
      alert();
  
  };
  });
  </code></pre>
  
  <p>and html
      </p>
  
  <pre><code>          &lt;div class="radio"&gt;
              &lt;label&gt;
                &lt;input type="radio" name="radius"
  
                     ng-change="handleRadioClick()"
                     ng-checked="radius.checked"&gt;
  
                {{radius.name}}
  
              &lt;/label&gt;
            &lt;/div&gt;
  
        &lt;/li&gt;
  </code></pre>
  
  <p>Notice "2 Mile" radio input is checked based on the radii scope structure. Why doesn't the ng-change trigger the function?</p>
  
  <p>If I add ng-model, the function triggers but the ng-checked does not work.</p>