Angular hybrid application - model not updating for select

Question

I'm working on a hybrid Angular/AngularJS application. A form, containing a drop down box, is being migrated to Angular. This migrated control works as expected in Firefox and Edge, however, in Chrome, the model for the migrated select is only updated when you change tab and then switch back. On all browsers, the processCounty() function is triggered correctly on change

Code for drop down in AngularJS form

<select class="form-control"
        ng-model="angularJS.countryCode" 
        ng-init="angularJS.countryCode = defaultCountryCode" 
        ng-change="controller.processCountry($event);" 
        required>
  <option value="" selected>(Select Country)</option>
  <option ng-repeat="country in countries | uppercase | orderBy:'name'" value="{{country.isoCode}}">{{ country.name }}</option>
</select>

Refactored Angular code for the same element

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="angularJS.countryCode" 
      (ngModelChange)="controller.processCountry($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [ngValue]="country.isoCode">{{country.name | uppercase}}</option>
</select>

Answer 1

Try changing the [ngValue] to [value] it might solve the issue!

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="angularJS.countryCode" 
      (ngModelChange)="controller.processCountry($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [value]="country.isoCode">{{country.name | uppercase}}</option>
</select>