<p dir="auto"><strong>I'm submitting a ...</strong><br>
[x ] bug report =&gt; search github for a similar issue or PR before submitting<br>
[ ] feature request</p>
<p dir="auto"><strong>Current behavior</strong><br>
Angular does not update the browser once it runs.</p>
<p dir="auto">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.</p>
<h3 dir="auto">EXAMPLE MARKUP</h3>
<p dir="auto"><code class="notranslate">&lt;myInput id="input1"&gt;&lt;/myInput&gt;</code></p>
<h3 dir="auto">EXAMPLE COMPONENT</h3>
<p dir="auto"><code class="notranslate">@Input id: string;</code></p>
<h3 dir="auto">EXAMPLE COMPONENT MARKUP</h3>
<p dir="auto"><code class="notranslate">&lt;label [for]="id"&gt;My Label&lt;/label&gt; &lt;input [id]="id" type="text" /&gt;</code></p>
<h3 dir="auto">RESULT:</h3>
<p dir="auto">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.</p>
<h3 dir="auto">RESULT:</h3>
<p dir="auto">Clicking labels for related inputs does not interact with the assigned element.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Default browser behavior should be maintained when associated form elements via <code class="notranslate">for</code> and <code class="notranslate">id</code>.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview" rel="nofollow">http://plnkr.co/edit/jJeqHAbO7vNVLV9GTvQW?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Should be able to use Angular to create dynamic components without having to reproduce default browser behavior. All form elements using<code class="notranslate">for</code> and <code class="notranslate">id</code> linking do not work as expected when given a dynamic value</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 7, VSCode, NodeJS, Angular Generator</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
2.3.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
all</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong><br>
6.8.0</p>
</li>
</ul>
<p dir="auto">Hey guys, I have a problem using http requests...</p>
<p dir="auto">My code:</p>
<h5 dir="auto">services/home.ts</h5>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Http} from 'angular2/http';
export class HomeService {  
  list: Object;
  constructor(){
  }
  getAll(http: Http){
    http.get('/api/todo/')
      // Call map on the response observable to get the parsed people object
      .map(res =&gt; res.json())
      // Subscribe to the observable to get the parsed people object and attach it to the
      // component
      .subscribe(todo =&gt; this.list = todo);
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Http</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/http'</span><span class="pl-kos">;</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">HomeService</span> <span class="pl-kos">{</span>  
  <span class="pl-c1">list</span>: <span class="pl-smi">Object</span><span class="pl-kos">;</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">getAll</span><span class="pl-kos">(</span><span class="pl-s1">http</span>: <span class="pl-smi">Http</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-s1">http</span><span class="pl-kos">.</span><span class="pl-en">get</span><span class="pl-kos">(</span><span class="pl-s">'/api/todo/'</span><span class="pl-kos">)</span>
      <span class="pl-c">// Call map on the response observable to get the parsed people object</span>
      <span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">res</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">json</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
      <span class="pl-c">// Subscribe to the observable to get the parsed people object and attach it to the</span>
      <span class="pl-c">// component</span>
      <span class="pl-kos">.</span><span class="pl-en">subscribe</span><span class="pl-kos">(</span><span class="pl-s1">todo</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">list</span> <span class="pl-c1">=</span> <span class="pl-s1">todo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h5 dir="auto">components/home.ts</h5>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {View, Component, NgFor} from 'angular2/angular2';
import {coreDirectives} from 'angular2/directives';
import {httpInjectables, Http} from 'angular2/http';
import {HomeService} from 'home/services/home';

@Component({
  selector: 'home',
  appInjector: [HomeService,httpInjectables]
})
@View({
  templateUrl:`modules/core/home/views/home.html`,
  directives: [coreDirectives, NgFor]
})
export class HomeComponent {
  homeService: HomeService;
  constructor(homeService: HomeService, http: Http) {
    this.homeService = homeService;
    homeService.getAll(http);
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">View</span><span class="pl-kos">,</span> <span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">NgFor</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">coreDirectives</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/directives'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">httpInjectables</span><span class="pl-kos">,</span> <span class="pl-smi">Http</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/http'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">HomeService</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'home/services/home'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'home'</span><span class="pl-kos">,</span>
  <span class="pl-c1">appInjector</span>: <span class="pl-kos">[</span><span class="pl-smi">HomeService</span><span class="pl-kos">,</span><span class="pl-s1">httpInjectables</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-smi">View</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">templateUrl</span>:<span class="pl-s">`modules/core/home/views/home.html`</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-s1">coreDirectives</span><span class="pl-kos">,</span> <span class="pl-smi">NgFor</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">HomeComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">homeService</span>: <span class="pl-smi">HomeService</span><span class="pl-kos">;</span>
  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">homeService</span>: <span class="pl-smi">HomeService</span><span class="pl-kos">,</span> <span class="pl-s1">http</span>: <span class="pl-smi">Http</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">homeService</span> <span class="pl-c1">=</span> <span class="pl-s1">homeService</span><span class="pl-kos">;</span>
    <span class="pl-s1">homeService</span><span class="pl-kos">.</span><span class="pl-en">getAll</span><span class="pl-kos">(</span><span class="pl-s1">http</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h5 dir="auto">home.html</h5>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;h1&gt;Todo List&lt;/h1&gt;
&lt;ul&gt;
    &lt;li *ng-for=&quot;#todo of homeService.list; #i = index&quot;&gt;
       {{i}} - {{ todo.name }} {{todo.checked}}
    &lt;/li&gt;
&lt;/ul&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Todo List<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">li</span> <span class="pl-c1">*ng-for</span>="<span class="pl-s">#todo of homeService.list; #i = index</span>"<span class="pl-kos">&gt;</span>
       {{i}} - {{ todo.name }} {{todo.checked}}
    <span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">So, when I use <code class="notranslate">homeService.getAll(http);</code> in the Component, I get the list of items, but duplicated...</p>
<p dir="auto">If I don't use this call, the list do not appear</p>
<p dir="auto">What's the better way to do this correctly?</p>
<p dir="auto">Thanks! 😄</p>