Two-way data binding doesn't on select field

Question

I'm having problem with a 2way data binding in my Angular2 (beta) app. There are no errors in the console so it's really hard to guess why the following snippet works for the input text field but doesn't work for the select field, any ideas?

The {{model.quantity}} doesn't update on the selected item change, but {{model.name}} does in the text field.

<div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" 
                    [(ngModel)]="model.name" > {{model.name}} 
                </div>
                <div class="form-group">
                        <label>Quantity</label>
                        <select class="form-control" [(ngModel)]="model.quantity">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select> {{model.quantity}} 
                </div>

On the other hand, when I do something like this:

in the ts file:

 logChange(input:any) {
    console.log('Selected value:',input);
}

in the view template:

 <div class="form-group">
                            <label>Quantity</label>
                            <select class="form-control" [(ngModel)]="amount" #amountField (change)="logChange(amountField.value)">
                             <option value="1">1</option>
                             <option value="2">2</option>
                             <option value="3">3</option>
                            </select>
                            {{amount}} 
                    </div>

The console displays the values on each change event.

Answer 1

I think it works, it is tested on Beta.0

Consider this plunker:

 <select [(ngModel)]="name"> 
    <option *ngFor="#n of names" [attr.value]="n">{{n}}</option>
  </select>

https://plnkr.co/edit/MMNWGh?p=info