Browser not updated after DOM is updated

I’m submitting a … [x ] bug report => search github for a similar issue or PR before submitting [ ] feature request

Current behavior Angular does not update the browser once it runs.

For instance, if you have a label and an input, if you bind the “for” attribute of the label to the “id” attribute of the input via a passed input, the browser will not recognize that the two are linked because Angular does not let the browser know it updated the DOM.

EXAMPLE MARKUP

<myInput id="input1"></myInput>

EXAMPLE COMPONENT

@Input id: string;

EXAMPLE COMPONENT MARKUP

<label [for]="id">My Label</label> <input [id]="id" type="text" />

RESULT:

Clicking the label does not apply focus to the input. This can also be seen with labels of radio buttons and checkboxes, where clicking the label does not produce the desired default browser behavior of interacting with the associated element.

RESULT:

Clicking labels for related inputs does not interact with the assigned element.

Expected behavior Default browser behavior should be maintained when associated form elements via for and id.

Minimal reproduction of the problem with instructions http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview

What is the motivation / use case for changing the behavior? Should be able to use Angular to create dynamic components without having to reproduce default browser behavior. All form elements usingfor and id linking do not work as expected when given a dynamic value

Please tell us about your environment: Windows 7, VSCode, NodeJS, Angular Generator

• Angular version: 2.0.X 2.3.0

• Browser: all

• Language: all

• Node (for AoT issues): 6.8.0

[DzmitryShylovich]

http://prntscr.com/dlvsp0

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}