title: Angular 2.1, radio button not updating on load
body: <p>For angular 2.1 - the radio button is not set even though the property in my interview variable is set and not null.</p>
  
  <p>I have tried to look at the following posts and tried almost every solution but without any luck.</p>
  
  <p><a href="https://stackoverflow.com/questions/31879497/angular2-radio-button-binding">Post1</a>
  <a href="https://stackoverflow.com/questions/33368683/model-wont-update-in-angular-2-radio-list">Post2</a></p>
  
  <p><strong>First setup</strong></p>
  
  <p>This one works when changing between the radio buttons, but it doesn't set the selected radio button upon load.</p>
  
  <pre><code>&lt;input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePersonal" value="0" [checked]="interview.interviewChannelType === 0"
                                  id="interviewChannelTypePersonal" required /&gt;
  &lt;label for="interviewChannelTypePersonal"&gt;Personlig møde&lt;/label&gt;
  &lt;input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypePhone" value="1" [checked]="interview.interviewChannelType === 1"
                                  id="interviewChannelTypePhone" required /&gt;
  &lt;label for="interviewChannelTypePhone"&gt;Telefon&lt;/label&gt;
  &lt;input type="radio" [(ngModel)]="interview.interviewChannelType" name="interviewChannelTypeVideo" value="2" [checked]="interview.interviewChannelType === 2"
                                  id="interviewChannelTypeVideo" required /&gt;
  &lt;label for="interviewChannelTypeVideo"&gt;Video&lt;/label&gt;
  </code></pre>
  
  <p><strong>Second try</strong></p>
  
  <p>This checks the selected radio button upon load but it wont let me navigate between the radio buttons.</p>
  
  <pre><code>&lt;input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 0" value="0" /&gt;
  &lt;label for="interviewChannelTypePersonal"&gt;Personlig møde&lt;/label&gt;
  &lt;input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 1" value="1" /&gt;
  &lt;label for="interviewChannelTypePhone"&gt;Telefon&lt;/label&gt;
  &lt;input type="radio" (change)="interview.interviewChannelType = $event.target.value" [checked]="interview.interviewChannelType === 2" value="2" /&gt;
  &lt;label for="interviewChannelTypeVideo"&gt;Video&lt;/label&gt;
  </code></pre>
  
  <p>interveiwChannelType is an enum:</p>
  
  <pre><code>export enum InterviewChannelType {
  Personal = 0,
  Phone = 1,
  Video = 2
  }
  </code></pre>
  
  <p>I hope some of you out there can give me a boost in the right direction! Thanks in advance.</p>
  
  <p><strong>SOLUTION FOUND</strong></p>
  
  <p>Thanks to HirenParekh's comment, he made me aware of using the value as a angular property instead of the normal attribue. Changing it from <code>value="0"</code> to <code>[value]="0"</code> did the trick.</p>