title: After adding [(ngModel)] to a radio button group, the default [checked] no longer works
body: <p>I'm working on a small reusable Component which styles radio buttons and emits the selected values.</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
  
  @Component({
      moduleId: module.id,
      selector: 'button-select',
      template: `&lt;div class="toggle-group"&gt;
                      &lt;div *ngFor="let choice of choices"&gt;
                          &lt;input type="radio"
                                 id="{{ groupName + choice }}"
                                 name="{{groupName}}"
                                 value="{{ choice }}"
                                 [checked]="choice === defaultChoice"
                                 [(ngModel)]="value"
                                 (ngModelChange)="choose($event)" /&gt;
                          &lt;label class="toggle-button"
                                 for="{{ groupName + choice }}"&gt;{{ choice }}&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;`,
      styleUrls: [
          'editableField.css',
          'buttonSelect.css'
      ]
  })
  
  export class ButtonSelectComponent implements OnInit {
      @Input() choices: string[];
      @Input() defaultChoice: string;
      @Input() groupName: string;
      @Input() value: string;
  
      @Output() valueChosen: EventEmitter&lt;any&gt; = new EventEmitter();
  
      ngOnInit() {
          this.choose(this.defaultChoice);
      }
  
      private choose(value: string) {
          this.valueChosen.emit(value);
      }
  }
  </code></pre>
  
  <p>The component is implemented like so:</p>
  
  <pre><code>&lt;button-select #statusFilter
                 [choices]="['All', 'Active', 'Draft']"
                 [defaultChoice]="'All'"
                 [groupName]="'statusFilter'"
                 (valueChosen)="filterChosen('statusFilter', $event)"
  &lt;/button-select&gt;
  </code></pre>
  
  <p><em>Before</em> adding <code>[(ngModel)]="value" (ngModelChange)="choose($event)"</code> to the button-select Component, the <code>[checked]="choice === defaultChoice"</code> directive correctly set the <code>checked</code> attribute on the relevant <code>&lt;input /&gt;</code>.</p>
  
  <p><em>After</em> adding the <code>[(ngModel)]</code>, <em>only</em> <code>ng-reflect-checked="true"</code> gets set, which prevents the visual styling from showing the default value (since my CSS uses a pseudo-selector).</p>
  
  <p>Changing <code>[(ngModel)]</code> for <code>[ngModel]</code> had no effect.</p>
  
  <p><strong>Why did this happen and how can I fix it?</strong></p>