title: Why does using the negation of a variable break data binding in Angular2?
body: <p>This seems like it should be straight-forward, but I can't see what I'm doing wrong.  I have a form on which some components are optionally enabled based on a yes/no radio button.  I'm attempting to set the disabled attribute based on the boolean behind that radio button.  If I set [disabled] to the radio button every thing works (but is reversed from the desired behavior).  If I set [disabled] to the negation of the boolean, it suddenly doesn't work.  I wrote up a Plunker to illustrate: <a href="http://plnkr.co/edit/wHmYT42GkpTOW9Qti2AQ?p=preview" rel="nofollow">NegationConditionExample</a>.  Simply remove the '!' from the oResponded variable and it will work but be reversed from the desired behavior.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>//our root app component
  import {Component, NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import { FormsModule } from '@angular/forms';
  import { CommonModule }   from '@angular/common';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;form (ngSubmit)="onSubmit()" #resolveForm="ngForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt; Did anyone respond? &lt;/label&gt;
          &lt;div class="radio"&gt;
             &lt;label&gt;
                &lt;input type="radio"
                       name="responded"
                       [(ngModel)]="oResponded"
                       #responded="ngModel"
                       value=true&gt; Yes someone responded
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="radio"&gt;
            &lt;label&gt;
                &lt;input type="radio"
                       name="responded"
                       [(ngModel)]="oResponded"
                       #responded="ngModel"
                       value=false&gt; No
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="responseType"&gt;What type of response?&lt;/label&gt;
          &lt;select class="form-control" id="responseType"
                  required
                  [(ngModel)]="oResponseType" name="responseType"
                  #responseType="ngModel"
                  [disabled]="!oResponded"&gt;
            &lt;option *ngFor="let i of oResponseTypes" [value]="i"&gt;{{i}&lt;/option&gt;
          &lt;/select&gt;
          &lt;div [hidden]="responseType.valid || responseType.pristine" class="alert alert-danger"&gt;
            Response Type is Required
          &lt;/div&gt;
        &lt;/div&gt;
        oResponded: {{oResponded}}
      &lt;/form&gt;
    `,
  })
  export class App {
    oResponded: boolean;
    oResponseType: string;
    oResponseTypes: string[] = ["Agreed", "Disagreed", "Other"];
    constructor() {
      this.oResponded = false;
    }
  }
  
  @NgModule({
    imports: [ BrowserModule, FormsModule, CommonModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}`
  </code></pre>