title: RxJS behavior subject and Angular ngModel binding with ngFor
body: <p>Not sure how to ask this, so if anyone can clear it up please do.
  If I put an angular component on a page twice and get the data from a behavior subject, everything works fine, until I bind to an input using ngModel. It appears as though I don't understand what's happening. I have attached a plunker. When you update the input, it updates everywhere. I'm not sure I'm being clear, but the plunker hopefully makes it obvious.</p>
  
  <p><a href="http://plnkr.co/edit/OQFEGVJAJF5kHhWoTOpm?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/OQFEGVJAJF5kHhWoTOpm?p=preview</a></p>
  
  <p><strong>app component:</strong></p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { FormsModule, FormBuilder, Validators } from '@angular/common';
  
  import { TodoComponent } from 'app/todo.component';
  import { TodoService } from 'app/todo.service';
  
  @Component({
    selector: 'todo-app',
    template: `
  
      &lt;h3&gt;Component 1&lt;/h3&gt;
      &lt;todo-component&gt;&lt;/todo-component&gt;
  
      &lt;br /&gt;&lt;br /&gt;
  
      &lt;h3&gt;Component 2&lt;/h3&gt;
      &lt;todo-component&gt;&lt;/todo-component&gt;
    `
  })
  export class AppComponent {
    constructor() { }
  }
  </code></pre>
  
  <p><strong>the component:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { TodoService } from 'app/todo.service';
  
  @Component({
    selector: 'todo-component',
    template: `
      &lt;div *ngFor="let t of test | async"&gt;
        &lt;div&gt;test: {{t.prop}}&lt;/div&gt;
        &lt;div&gt;test: &lt;input [(ngModel)]="t.prop"&gt;&lt;/div&gt;
      &lt;/div&gt;
    `
  })
  export class TodoComponent {
    private test: any;
  
    constructor(private todoService: TodoService) { }
  
    ngOnInit() {
      this.test = this.todoService.test;
    }
  }
  </code></pre>
  
  <p><strong>the service</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';    
  import { Observable } from 'rxjs/Observable';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class TodoService {
    private initialTestState = [{prop: 'val'}];
    private test$: BehaviorSubject&lt;[]&gt;;
    private test: Observable&lt;[]&gt;;
  
    constructor() {
      this.test$ = new BehaviorSubject&lt;[]&gt;(this.initialTestState);
    }
  
    get test() {
      return this.test$.asObservable();
    }
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Vc8UT.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vc8UT.gif" alt="Why!"></a></p>