I am using angular 2 and I created a drop down menu from options with the first option being a default option
<select class="form-control" [(ngModel)]="pros" (ngModelChange)="onSelectProfessions($event)">
<option value="0">Type of Healthpros</option>
<option *ngFor="let item of professions" value="{{item.id}}">{{item.text}}</option>
</select>
However when I load the page, the first item is not displaying in the dropdown menu, its just empty, when I select a value, the value is selecting, see screenshots for details:
Before Selecting Value
After Selecting Value
How do I get the first value to appear so it says "Type of Healthpros" instead of just blank?
Here is what get rendered:
<select _ngcontent-c6="" class="form-control ng-untouched ng-pristine ng-valid" ng-reflect-model="">
<option _ngcontent-c6="" value="0" ng-reflect-value="0">Type of Healthpros</option>
<!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object" }-->
<option _ngcontent-c6="" value="1" ng-reflect-value="1">Health Technologist</option>
<option _ngcontent-c6="" value="2" ng-reflect-value="2">Sport Medicine Physician</option>
<option _ngcontent-c6="" value="3" ng-reflect-value="3">Medical Receptionist</option>
<option _ngcontent-c6="" value="4" ng-reflect-value="4">Psychiatry</option>
</select>
