Dropdown not working as expected in Safari?

In fact, you may find that the accepted answer is insufficient. At least using Angular 5 and Safari, I have found that you must explicitly make the option undefined. In other words:

 <option disabled selected value=undefined> --Select-- </option>

Otherwise, the option will simply be marked as disabled and Safari will continue to show that it has the first real option selected, when in fact it isn't (and can't be).

This is not an angular issue, this is the default behavior on safari/mobile safari. An easy solution/workaround is shown below.

If you add another option box such as:

<option disabled selected value> --Select-- </option>

Then your code becomes:

<div class="form-group">
    <label for="vendors">Vendors</label>
    <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
        <option disabled selected value> --Select-- </option>
        <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
    </select>
</div>

This way you cannot re-select the first "Select" box after the user has made a valid selection, answer taken from this answer.