Dropdown list - model binding by value - angular 2
<p>I have a page which allows a user to update the colour of a car. There are two api calls, one to bring back the car json object and one to fill a drop down list of colours. </p>

<p>My issue is that Angular 2 appears to do model binding via reference and not value. This means that although the colour 'green' might be set on the car, the color 'green' will not be selected in the drop down list even when it matches as that object has come from a different api call.  </p>

<p>Here the select list is bound to the 'colour' property of car. </p>

<pre><code>&lt;div&gt;
    &lt;label&gt;Colour&lt;/label&gt; 
    &lt;div&gt;
        &lt;select [(ngModel)]="car.colour"&gt;     
            &lt;option *ngFor="let x of colours" [ngValue]="x"&gt;{{x.name}}&lt;/option&gt;
        &lt;/select&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When I set up the model in the back-end, if I set the color of the car to have the same value object (in this case green), the drop down is not selected. However when I set it using the same instance from the list of values used to bind the list it is selected as expected.</p>

<pre><code>  ngOnInit(): void {

        this.colours = Array&lt;Colour&gt;();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));

        this.car = new Car();
        //this.car.colour = this.colours[1]; // Works
        this.car.colour = new Colour(1, 'Green');  // Fails    
    }
</code></pre>

<p>Here is a plunker showing the issue. Simply switch between these to lines to illustrate the issue.</p>

<p>this.car.colour = this.colours[1]; // Works</p>

<p>this.car.colour = new Colour(1, 'Green');  // Fails  </p>

<p><a href="https://plnkr.co/edit/m3xBf8Hq9MnKiaZrjAaI?p=preview" rel="nofollow">https://plnkr.co/edit/m3xBf8Hq9MnKiaZrjAaI?p=preview</a></p>

<p>How can I get angular to compare objects by value not reference when binding in this way?</p>

<p>Regards</p>

<p>Steve</p>

<p><strong>Update</strong></p>

<p>I solved in in my use case by setting the models 'superPower' property to the matching item in the list used to populate the dropdown list. </p>

<pre><code>setupUpdate(id: number): void {

    this.pageMode = PageMode.Update;
    this.submitButtonText = "Update";

    this.httpService.get&lt;Hero&gt;(this.appSettings.ApiEndPoint + 'hero/' + this.routeParams.get('id')).subscribe(response =&gt; { 
        this.hero = response;             

        this.httpService.get&lt;SuperPower[]&gt;(this.appSettings.ApiEndPoint + 'superPower/').subscribe(response =&gt; {
            this.superPowers = response;   
            this.hero.superPower = this.superPowers.filter(x =&gt; x.id == this.hero.superPower.id)[0];
        });
    });
}
</code></pre>