title: Angular2 the for attribute on a label does not link it to the input
body: <p>I am working with Angular2 RC5.
  I have a component encapsulating a label and an input</p>
  
  <pre><code>import { Component, Input} from '@angular/core';
  
  @Component({
    selector: 'my-input',
    template: `
      &lt;div class="mx-field" &gt;
        &lt;label [attr.for]="id"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/label&gt;
        &lt;input
          type='text'
          id = "{{id}}"
        /&gt;
      &lt;/div&gt;
    `
  })
  
  export class InputComponent {
    @Input() id: string;
  }
  </code></pre>
  
  <p>It is called from any template as follows <code>&lt;my-input id="inputcontrol"&gt;input&lt;/my-input&gt;</code> 
  The problem is that when I click on the label the input does not get focused, although when I check the dev tools in the browser both the for and id attributes are correctly set</p>
  
  <p>here is a plunker showing the issue: <a href="https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n" rel="nofollow">https://plnkr.co/edit/WGhg597MzJ5df4f0Hm5n</a></p>