title: Value within input not binding in Angular 2
body: <p>I have an *ngFor that loops through all my Friends. Within the for I have an input box that stores the name of the friend. I would like to store the value of the update name of the friend when I click a button, but this is not working as expected:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
    &lt;div *ngFor="let friend of friends"&gt;
      &lt;input type="text" [value]="friend.name"&gt;
      &lt;button (click)="save(friend)" type="submit"&gt;save&lt;/button&gt;
    &lt;/div&gt;`,
    providers: []
  })
  export class App {
    friends: Friend[] = new Array(new Friend("Alice"), new Friend("Bob"));
  
    save(friend: Friend) {
      console.log(friend.name);
    }
  }
  
  export class Friend {
    constructor(public name: string) {}
  }
  </code></pre>
  
  <p>The expectation is that the save method would be called with a friend object that contains the new value for the name. But it's just passing the old name.</p>
  
  <p>I feel like I'm missing something fundamental with the way Angular2 works.</p>
  
  <p><strong>Plunkr</strong>: <a href="http://plnkr.co/edit/blYzEW0JufOcPwIwzoWQ?p=preview" rel="noreferrer">http://plnkr.co/edit/blYzEW0JufOcPwIwzoWQ?p=preview</a></p>