title: Binding not working for innerHTML in nested component
body: <p>I'm trying to come up with a custom select control, </p>
  
  <pre><code>&lt;my-select&gt;
     &lt;my-option&gt;Option 1&lt;/my-option&gt;
     &lt;my-option&gt;Option 2&lt;/my-option&gt;
     ...
  &lt;/my-select&gt;
  </code></pre>
  
  <p>which works alright with static text. However, if I introduce bindings</p>
  
  <pre><code>&lt;my-select&gt;
     &lt;my-option *ngFor="let option of options"&gt;{{option}}&lt;/my-option&gt;
  &lt;/my-select&gt;
  </code></pre>
  
  <p><code>{{option}}</code> always renders as empty string (if I replace <code>{{option}}</code> with, say <code>test</code> then everything is working again). Here are my components:</p>
  
  <pre><code>@Component({
    selector: 'my-select',
    template: `
      &lt;ul&gt;
        &lt;li *ngFor="let option of options"&gt;
          {{option.text}}
        &lt;/li&gt;
      &lt;/ul&gt;
    `
  })
  export class SelectComponent {
    options: OptionComponent[] = [];
    addOption(option): OptionComponent {
      this.options.push(option);
    }
  }
  
  @Component({
    selector: 'my-option',
    template: `
      &lt;div #wrapper&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
    `,
    directives: []
  })
  export class OptionComponent implements AfterContentInit {
    @ViewChild('wrapper') wrapper: ElementRef;
    text: string;
    constructor(private select: SelectComponent) { }
    ngAfterContentInit() {
        let text = this.wrapper.nativeElement.innerHTML;
        this.text = text ? text : 'EMPTY';
        this.select.addOption(this);
    }
  }
  </code></pre>
  
  <p>How can I get this to work?</p>
  
  <p>EDIT: Almost forgot, <a href="http://plnkr.co/edit/Dnf3L54My4ZcCVWnC5Ul" rel="nofollow">here's a plnkr</a> showing the problem.</p>