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 : /

Answer 2

I Think issue is with the {{city}} in the option , this has no model available i guess. If we print both {{boro}} as value and {{city}} as text we need to have the relation in the city vs boro. Or u could put the all city in an array of objects and get the value of city with send the boro key to controller function and get the city like {{getCity(boro)}} and set the boro as ng-model="boro "

Answer 3

I tried reproduce your code sample, if I understood well, the problem is in fact that you don't put your objects in array, I believe that ng-repeat perform in a collection of objects. You can put your options in array with follow format e.g. [{code: BQ, city: Brooklyn}]. Look below

app.controller('MainCtrl', function($scope) {
    $scope.form = {}; 
    $scope.boros = [
      {code: "BK", city: "brooklyn"}, 
      {code: "Q", city: "queens"},
      {code: "NY", city: "manhattan"},
      {code: "BX", city: "bronx"},
      {code: "SI", city:"staten island"}
    ]
});

And your template:

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="boro in boros track by $index" value="{{boro}}">{{boro.city}}</option>
    <option value='other'>Other</option>
</select>

Check this in plunker.