title: Angular 2: Application freezing when model is changed from select input
body: <p>In an Angular 2 application I am writing, I have a <code>select</code> element that is bound to a field in the controller via <code>[(ngModel)]</code>:</p>
  
  <pre><code>&lt;select [(ngModel)]="dateInfo.year" class="form-control"&gt;
    &lt;option *ngFor="let year of getYearList()" [value]="year"&gt;{{year}}&lt;/option&gt; 
  &lt;/select&gt;
  </code></pre>
  
  <p><code>dateInfo</code> is a property in the controller that refers to a <code>DateInfo</code> object contained in a service called <code>DateService</code>:</p>
  
  <pre><code>@Injectable()
  export class DateService {
    public dateInfo: DateInfo = {
      year: 2016
    }
  }
  </code></pre>
  
  <p>The <code>DateInfo</code> object itself is a simple Typescript interface that just stores the year:</p>
  
  <pre><code>export interface DateInfo {
    year: number
  }
  </code></pre>
  
  <p>The reason I am using this interface is to propagate changes to <code>year</code> to all components that use <code>DateService</code>, as per <a href="https://stackoverflow.com/questions/34714462/updating-variable-changes-in-components-from-a-service-with-angular2">the first answer to this question</a>.</p>
  
  <p>For some reason, when the model is changed from the <code>select</code> element, the whole application freezes (tested in Chrome and Edge). I have made a plunker to illustrate the problem <a href="http://plnkr.co/edit/RvFqEpAsPEv4qPftFpaj?p=preview" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Thanks in advance!</p>