angularjs 1.7 select dropdown is showing an extra option value

Question

I am trying to migrate angularjs from 1.5 to 1.7 in my app.

I have my model data as below:

$scope.colors = [
  {name:'black', shade:'dark'},
  {name:'yellow', shade:'light'}
];

$scope.myColor = ''; 

The html:

 <label>Color :
 <select ng-model="myColor"
        ng-options="color.name for color in colors">
     <option value="">-- choose color --</option>
  </select>

Since $scope.myColor is an empty string, angular is rendering an extra <option value="?"></option> in the drop down list as shown below.

<select ng-model="myColor" ng-options="color.name for color in colors" class="ng-pristine ng-untouched ng-valid ng-empty">
   <option value="?" selected="selected"></option>
   <option value="">--choose color --</option>
   <option label="black" value="object:3">black</option>
   <option label="yellow" value="object:4">yellow</option>
</select>

Is there any way to avoid displaying <option value="?"></option> and default the it to <option value="">--choose color --</option> when the $scope.myColor has empty value?

It was working as expected with angular 1.5.

Here is the plunker: https://plnkr.co/edit/g0rVjBpM2qLrGuweP19E?p=preview

edit: @FDavidov, @Houssein, @Aleksey suggested me to use $scope.myColor = null in below answers. Thanks for this. But this is a major change in my enterprise app code base. I am trying to find out if there is any other way to achieve the same with a change in html.

Answer 1

you should set your $scope.myColor to null not to "".

Answer 2

Vinay,

Assigning an empty string (i.e. '') to $scope.myColor is giving to it an actual value. Simply either remove the statement $scope.myColor = ''; or replace '' by a null.