title: Binding radio to [checked] in Angular 2
body: <p>I'm porting some code where radio button state is bound to a boolean and manually managed. I don't want to rewrite the code to manage a shared <em>string</em> value (via ngModel), just want to bind a boolean to the "checked" property and control the checked state in my code. There are times when I need to <em>reject</em> a selection, and uncheck the radio box after it has be clicked.</p>
  
  <p>Programmatically unchecking a radio button works fine using regular ol' Javascript (<a href="https://plnkr.co/edit/Zi8vtlm7amU1p30lPcXs?p=preview" rel="nofollow noreferrer">plunker</a>):</p>
  
  <pre><code>&lt;input type="radio" id="radioButton" onclick="uncheckRadioButton()"&gt;
  &lt;script&gt;
    function uncheckRadioButton() {
       document.getElementById("radioButton").checked = false;
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>This results in a radio button that can't be checked.</p>
  
  <p>But binding a boolean to <code>[checked]</code> in Angular 2 simple doesn't work (<a href="https://plnkr.co/edit/Z8z5DdH5bI5iCJtDBvX1?p=preview" rel="nofollow noreferrer">plunker</a>):</p>
  
  <pre><code>  &lt;input type="radio" [checked]="radioChecked" (click)="onRadioClicked()"&gt;
  </code></pre>
  
  <p>It doesn't matter what value "radioChecked" has (here it's hardcoded to false); if you click the radio button, it gets checked.</p>
  
  <p>Am I doing something wrong here?</p>