Angular ng-repeat empty option on select element causes error when leaving state

Question

Im dynamically generating some options for a <select> element in angular.js using the ng-repeat directive.

Im using ng-repeat rather than ng-options because this is for an empty form and I wanted to set a selected and disabled default value, as well as a final option not in the model.

var form = {}; // to be filled with form data, including form.boro

var boros = {"BK":"brooklyn","Q":"queens","NY":"manhattan","BX":"bronx","SI":"staten island"}

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="(k, val) in boros" value="{{k}}">{{val}}</option>
    <option value='other'>Other</option>
</select>

This generated the intended element and options but causes the following error to be thrown:

TypeError: Cannot read property '$$phase' of null

This error results from setting value="" in <option value="">City</option>

The app still runs and does not crash but I am curious why this happens on state exit and if theres something Im doing wrong.

Answer 1

Looks like placing selected disabled on the empty initial option clears the error.

<option value="" selected disabled >City</option> 

Bit of an oversight on my part : /