I have a bug when I remove an address and add a new one. The previous address gets overwritten with the new one.

I created a small demo application to showcase my problem:

github: <https://github.com/kolomu/HeroDemo>  

stackblitz: <https://stackblitz.com/edit/angular-gitter-5o6ydi>

It's not that the model is wrong, somehow the view which angular renders isn't in updated correctly.

View:

```
  <form #heroForm="ngForm">

    <div class="form-group">
      <div class="addresses" *ngFor="let address of model.addresses; let i=index">
        <label for="address-{{i}}">Address {{i}}</label>
        <input type="text" class="form-control" [(ngModel)]="address.location" name="location-{{i}}">
        <button class="btn btn-danger" (click)="remove(address)">Remove Address</button>
      </div>
    </div>

    <button class="btn btn-primary" (click)="add()">Add Address</button>

  </form>

```

Component Class:

```
export class HeroFormComponent {

  model = new Hero(18, 'Dr IQ', [new Address(1,'main','Earth'), new Address(9001,'sub','Moon')]);

  remove(address) {
    const index = this.model.addresses.findIndex(
      address => address.id === address.id
    );

    this.model.addresses.splice(index, 1);
  }

  add(){
    this.model.addresses.push(new Address());
  }

}

```

Data Model:

```
export class Address {
    constructor(public id?: number, public type?:string, public location?: string) { }
}

export class Hero {

    constructor(
      public id: number,
      public name: string,
      public addresses: Address[]
    ) {  }

}

```

GIF-Image showcasing the problem:
<https://gfycat.com/DelightfulSpiffyBetafish>