model bind is not working with select in angular2

Question

I am trying to set default value of drop-down, I set the Model with a default value but its not updating select

please see this https://plnkr.co/edit/bNM5Yxx78iykv2opazoL?p=preview

@Component({
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option attr.value="{{tower._id}}" *ngFor="#tower of _towers;">Tower {{tower.name}}</option>
</select>    
    `})
export class AppComponent {
  _towers = [{_id:1, name: '1'}, {_id:2, name: '2'}, {_id:3, name: '3'}];
  constructor() {
    this._selectedTower = 2 ;
  }

  changeTower() {
    setTimeout(()=>{
      alert( this._selectedTower);
    },100);
  }

Answer 1

If _selectedTower is referring to an object instead of a primitive value (same for _towers - array of objects instead of primitive values) then use ngValue instead of value

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower" *ngFor="let tower of _towers;">Tower {{tower.name}}</option>
</select>    

Answer 2

You need to use ngValue this way for your options:

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower">
  <option [ngValue]="tower._id" *ngFor="#tower of _towers;">Tower {{tower.name}}</option>
</select> 

See this plunkr: https://plnkr.co/edit/UC5iYQUIFIrQMNeYbSQy?p=preview.

Answer 3

<select class="form-control selectpicker" #select (change)="changeTower(select.value)" [(ngModel)]="_selectedTower">
  <option value="{{tower._id}}" *ngFor="#tower of _towers;">Tower {{tower.name}}</option>
</select>  

changeTower(id) {

    //id is the selected value
}