Angular 2 Select Component set initial selection
<p>I am trying to create a select component wrapper in Angular 2 using ngModel. The events all fire off correctly once the selection is changed but I cannot set the initial selection when it's rendered.</p>

<p>This is my component:</p>

<pre><code>@Component({
selector: 'my-dropdown',
inputs: ['selectedItem', 'items', 'label'],
outputs: ['selectedItemChange'],
template: `
&lt;div class="field"&gt;
  &lt;label&gt;{{label}}&lt;/label&gt;
    &lt;select class="ui search selection dropdown" [ngModel]="selectedItem" (change)="onChange($event.target.value)"&gt;
      &lt;option value="" selected&gt;Please Select&lt;/option&gt;
      &lt;option *ngFor="#item of items" [value]="item.value"&gt;{{item.label}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;`
})

export class MyDropdownComponent {

items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter&lt;any&gt; = new EventEmitter();

private onChange(newValue) {

    console.log(newValue);
    this.selectedItem = this.items.find(item =&gt; item.value == newValue);
    console.log(this.selectedItem);
    this.selectedItemChange.emit(newValue);
}
}
</code></pre>

<p>And I'm using it in the view like this:</p>

<pre><code>&lt;my-dropdown [items]="selectItems" [(selectedItem)]="itemToSelect" [label]="'Please Select'"&gt;&lt;/my-dropdown&gt;
</code></pre>

<p>When I set the <code>itemToSelect</code> value in the parent component on init, it does not set the selected option value in the UI.</p>

<p>I have also tried to use the <code>ngModelChange</code> event but it does not fire a change event.</p>