ng-checked Radio Button not setting ng-model value in AngularJS on page load
<p>I am learning angularJS and was trying to use <code>ng-model</code>, <code>ng-checked</code> and <code>ng-if</code> together for radio buttons</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Angular JS Radio Button Test&lt;/title&gt;
&lt;/head&gt;
&lt;body ng-app=""&gt;
    &lt;input type="radio" name="gender" value="M" ng-model="selectedGender" ng-checked="true"/&gt;M&lt;br /&gt;
    &lt;input type="radio" name="gender" value="F" ng-model="selectedGender" /&gt;F&lt;br /&gt;
    &lt;div ng-if="selectedGender == 'M'"&gt;
        Male
    &lt;/div&gt;
    &lt;div ng-if="selectedGender == 'F'"&gt;
        Female
    &lt;/div&gt;

&lt;/body&gt;
&lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;    
&lt;/html&gt;
</code></pre>

<p>Now, on the initial page load, the "M" radio button is checked, but still the <code>&lt;div ng-if="selectedGender == 'M'"&gt;</code> div does not show, unless I click on it again, after which it works.</p>

<p>What causes this issue, and how can it be fixed.</p>

<p>Thanks in advance.</p>