<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using ngModel and trackBy in <code class="notranslate">&lt;select&gt;</code> the initial value is not selected when it is an object.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Initial value should be selected.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
HTML:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;select [(ngModel)]=&quot;selectedItem&quot;&gt;
    &lt;option *ngFor=&quot;let item of items; trackBy:itemIdentity&quot; [value]=&quot;item&quot;&gt;
      {{item.name}}
   &lt;/option&gt;
&lt;/select&gt;"><pre class="notranslate"><code class="notranslate">&lt;select [(ngModel)]="selectedItem"&gt;
    &lt;option *ngFor="let item of items; trackBy:itemIdentity" [value]="item"&gt;
      {{item.name}}
   &lt;/option&gt;
&lt;/select&gt;
</code></pre></div>
<p dir="auto">TS:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="private items = [{id: 0, name: 'first'}, {id: 1, name: 'second'}];
private selectedItem = {id: 1, name: 'second'};

itemIdentity(index:number, item:any):any {
   return item.id;
}"><pre class="notranslate"><code class="notranslate">private items = [{id: 0, name: 'first'}, {id: 1, name: 'second'}];
private selectedItem = {id: 1, name: 'second'};

itemIdentity(index:number, item:any):any {
   return item.id;
}
</code></pre></div>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.1</li>
<li><strong>Browser:</strong> Chrome</li>
<li><strong>Language:</strong> TypeScript X.X</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Currently NgModel does object reference comparison. This is not very flexible.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
See example with two multi selects - first one doesn't use workaround to enforce usage of same instances. The second one does.</p>
<p dir="auto"><a href="http://plnkr.co/edit/MND6j3Wa5ZDsIt9X9ZVQ?p=preview" rel="nofollow">http://plnkr.co/edit/MND6j3Wa5ZDsIt9X9ZVQ?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Objects do not always come from the same source. They typically come from some REST service. And they usually don't have the same instance.</p>
<p dir="auto">Current behavior requires workaround for something I believe to be very (if not the most) common use case. I think those should be supported by framework without requiring any workarounds.</p>
<p dir="auto"><strong>Suggested solution</strong><br>
I suggest creating comparator object (or callback) which would compare two objects and return true if they are equal. NgModel would then internally use this comparator to compare objects.</p>
<p dir="auto">Resulting code could look like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;select multiple class=&quot;form-control&quot; 
 name=&quot;selectedCountries&quot; 
 [ngComparator]=&quot;countryComparator&quot; 
 [(ngModel)]=&quot;selectedCountries&quot;&gt;
   &lt;option *ngFor=&quot;let country of countries&quot; [ngValue]=&quot;country&quot;&gt;
      {{country.name}}
   &lt;/option&gt;
&lt;/select&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">select</span> <span class="pl-c1">multiple</span> <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" 
 <span class="pl-c1">name</span>="<span class="pl-s">selectedCountries</span>" 
 <span class="pl-c1">[ngComparator]</span>="<span class="pl-s">countryComparator</span>" 
 <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">selectedCountries</span>"<span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">*ngFor</span>="<span class="pl-s">let country of countries</span>" <span class="pl-c1">[ngValue]</span>="<span class="pl-s">country</span>"<span class="pl-kos">&gt;</span>
      {{country.name}}
   <span class="pl-kos">&lt;/</span><span class="pl-ent">option</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">select</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Framework could also provide some default comparators - for example one, which would compare object attributes. That one would be sufficient for quite a lot of use cases.</p>
<p dir="auto">If there already is some standard solution, please point me to it. I tried to search and I didn't find anything. I found just <a href="http://stackoverflow.com/questions/40325480/angular2-ngmodel-ngvalue-select-option-object-equality-across-different-instan" rel="nofollow">this stack overflow post</a> describing the same problem,  but not providing any solution.</p>