<h2 dir="auto">`app.component.html:-</h2>
<div dir="auto">
    
        CRUD for Cars
        
        
        
        
		
        
            			   
				{{i.value}}{{j==3&amp;&amp;countnum&lt;12 ? callme() : ''}}
			
        
       
        <div dir="auto"></div>
    
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;p-dialog header=&quot;Car Details&quot; [(visible)]=&quot;displayDialog&quot; [responsive]=&quot;true&quot; showEffect=&quot;fade&quot; [modal]=&quot;true&quot;&gt;
    &lt;div class=&quot;ui-grid ui-grid-responsive ui-fluid ui-grid-pad&quot; *ngIf=&quot;car&quot;&gt;
        &lt;div class=&quot;ui-grid-row&quot;&gt;
            &lt;div class=&quot;ui-grid-col-4&quot;&gt;&lt;label for=&quot;vin&quot;&gt;Vin&lt;/label&gt;&lt;/div&gt;
            &lt;div class=&quot;ui-grid-col-8&quot;&gt;&lt;input pInputText id=&quot;vin&quot; [(ngModel)]=&quot;car.vin&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ui-grid-row&quot;&gt;
            &lt;div class=&quot;ui-grid-col-4&quot;&gt;&lt;label for=&quot;brand&quot;&gt;Year&lt;/label&gt;&lt;/div&gt;
            &lt;div class=&quot;ui-grid-col-8&quot;&gt;&lt;input pInputText id=&quot;brand&quot; [(ngModel)]=&quot;car.year&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ui-grid-row&quot;&gt;
            &lt;div class=&quot;ui-grid-col-4&quot;&gt;&lt;label for=&quot;brand&quot;&gt;Brand&lt;/label&gt;&lt;/div&gt;
            &lt;div class=&quot;ui-grid-col-8&quot;&gt;&lt;input pInputText id=&quot;brand&quot; [(ngModel)]=&quot;car.brand&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ui-grid-row&quot;&gt;
            &lt;div class=&quot;ui-grid-col-4&quot;&gt;&lt;label for=&quot;color&quot;&gt;Color&lt;/label&gt;&lt;/div&gt;
            &lt;div class=&quot;ui-grid-col-8&quot;&gt;&lt;input pInputText id=&quot;color&quot; [(ngModel)]=&quot;car.color&quot; /&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
        &lt;div class=&quot;ui-dialog-buttonpane ui-widget-content ui-helper-clearfix&quot;&gt;
            &lt;button type=&quot;button&quot; pButton icon=&quot;fa-close&quot; (click)=&quot;delete()&quot; label=&quot;Delete&quot;&gt;&lt;/button&gt;
            &lt;button type=&quot;button&quot; pButton icon=&quot;fa-check&quot; (click)=&quot;save()&quot; label=&quot;Save&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/footer&gt;
&lt;/p-dialog&gt;"><pre class="notranslate"><code class="notranslate">&lt;p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"&gt;
    &lt;div class="ui-grid ui-grid-responsive ui-fluid ui-grid-pad" *ngIf="car"&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="vin"&gt;Vin&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="vin" [(ngModel)]="car.vin" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="brand"&gt;Year&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="brand" [(ngModel)]="car.year" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="brand"&gt;Brand&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="brand" [(ngModel)]="car.brand" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="color"&gt;Color&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="color" [(ngModel)]="car.color" /&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
        &lt;div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"&gt;
            &lt;button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"&gt;&lt;/button&gt;
            &lt;button type="button" pButton icon="fa-check" (click)="save()" label="Save"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/footer&gt;
&lt;/p-dialog&gt;
</code></pre></div>
</div>`
`app.component.ts:-
-------------------
import {Component,Input} from '@angular/core';
import {Car} from './cars/car';
import {CarService} from './cars/carservice';
import {SelectItem} from 'primeng/primeng';
class PrimeCar implements Car {
    constructor(public vin?, public year?, public brand?, public color?) {}
}
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/component/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/component">@component</a>({<br>
templateUrl: 'app/app.component.html',<br>
selector: 'my-app'<br>
})<br>
export class AppComponent {</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="displayDialog: boolean;

car: Car = new PrimeCar();

selectedCar: Car;

newCar: boolean;
brands: SelectItem[];
bra:SelectItem[];
cars: Car[];
cities: SelectItem[];
heroes: any[];
selectedCity: string;
countnum:number;
constructor(private carService: CarService) {
   this.countnum=0;
this.numbers = Array(5).fill().map((x,i)=&gt;i); // [0,1,2]
//this.num = Array(5).fill().map((x,i)=&gt;i); // [1,2,0]
  this.brands = [];
    this.brands.push({label: '1', value: 'fuck',selectit:2});
    this.brands.push({label: '2', value: 'Audi',selectit:2});
   this.brands.push({label: '0', value: 'BMW',selectit:1});
   this.bra=[];
   this.bra.push({label: '1', value: 'fuck',selectit:2});
	this.heroes=[1,2,3,3,2,1,2,2,3,1];
	
	
}

ngOnInit() {

	
    this.carService.getCarsMedium().then(cars =&gt; this.cars = cars);
}
@Input()"><pre class="notranslate"><code class="notranslate">displayDialog: boolean;

car: Car = new PrimeCar();

selectedCar: Car;

newCar: boolean;
brands: SelectItem[];
bra:SelectItem[];
cars: Car[];
cities: SelectItem[];
heroes: any[];
selectedCity: string;
countnum:number;
constructor(private carService: CarService) {
   this.countnum=0;
this.numbers = Array(5).fill().map((x,i)=&gt;i); // [0,1,2]
//this.num = Array(5).fill().map((x,i)=&gt;i); // [1,2,0]
  this.brands = [];
    this.brands.push({label: '1', value: 'fuck',selectit:2});
    this.brands.push({label: '2', value: 'Audi',selectit:2});
   this.brands.push({label: '0', value: 'BMW',selectit:1});
   this.bra=[];
   this.bra.push({label: '1', value: 'fuck',selectit:2});
	this.heroes=[1,2,3,3,2,1,2,2,3,1];
	
	
}

ngOnInit() {

	
    this.carService.getCarsMedium().then(cars =&gt; this.cars = cars);
}
@Input()
</code></pre></div>
<p dir="auto">set ready(isReady: boolean)<br>
{<br>
if (isReady)<br>
{<br>
console.log('hello');<br>
}<br>
}<br>
showDialogToAdd() {<br>
this.newCar = true;<br>
this.car = new PrimeCar();<br>
this.displayDialog = true;<br>
}</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="save() {
    if(this.newCar)
        this.cars.push(this.car);
    else
        this.cars[this.findSelectedCarIndex()] = this.car;

    this.car = null;
    this.displayDialog = false;
}

delete() {
    this.cars.splice(this.findSelectedCarIndex(), 1);
    this.car = null;
    this.displayDialog = false;
}

onRowSelect(event) {
    this.newCar = false;
    this.car = this.cloneCar(event.data);
    this.displayDialog = true;
}

cloneCar(c: Car): Car {
    let car = new PrimeCar();
    for(let prop in c) {
        car[prop] = c[prop];
    }
    return car;
}

findSelectedCarIndex(): number {
    return this.cars.indexOf(this.selectedCar);
}
callme()
{
  this.countnum=this.countnum+1;
  this.heroes[0]=this.heroes[this.countnum];
}"><pre class="notranslate"><code class="notranslate">save() {
    if(this.newCar)
        this.cars.push(this.car);
    else
        this.cars[this.findSelectedCarIndex()] = this.car;

    this.car = null;
    this.displayDialog = false;
}

delete() {
    this.cars.splice(this.findSelectedCarIndex(), 1);
    this.car = null;
    this.displayDialog = false;
}

onRowSelect(event) {
    this.newCar = false;
    this.car = this.cloneCar(event.data);
    this.displayDialog = true;
}

cloneCar(c: Car): Car {
    let car = new PrimeCar();
    for(let prop in c) {
        car[prop] = c[prop];
    }
    return car;
}

findSelectedCarIndex(): number {
    return this.cars.indexOf(this.selectedCar);
}
callme()
{
  this.countnum=this.countnum+1;
  this.heroes[0]=this.heroes[this.countnum];
}
</code></pre></div>
<p dir="auto">}`<br>
I have rendered a primeng datatable and a column of drop downs if you observe my code I am trying to select default value for each drop down as<br>
drop down 1 - default selected value is "Audi"<br>
drop down 2 - default selected value is "BMW" but I am not successful please help</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/12388920/22031470/b5362adc-dd06-11e6-8ed9-5bb7220a7ee5.png"><img src="https://cloud.githubusercontent.com/assets/12388920/22031470/b5362adc-dd06-11e6-8ed9-5bb7220a7ee5.png" alt="1-16-2017 10-43-31 pm" style="max-width: 100%;"></a></p>
<p dir="auto"><a href="https://plnkr.co/edit/IWluMiywDBwZVIhCWOKn?p=preview" rel="nofollow">https://plnkr.co/edit/IWluMiywDBwZVIhCWOKn?p=preview</a></p>
<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>