ng-repeat with <option> binding issues

[RickStrahl]

I have an odd problem where I cannot get an ng-model value bound to a <select ng-model> to work against a list bound with ng-repeat. I can't duplicate the scenario in a simple plunkr.

This plunkr works, but the same code in an app with more complex layout fails with the first list displaying the wrong item in the first list. In my actual application, I see the model values displayed correctly on the bottom but the actual select list always selects DOG. IOW, the model is correct, but the binding in the select list is not.

The only way I've been able to work around this is to use $timeout() to delay assigning the value which works but is ugly:

        // special handling for 'remembering' selection
        var type = animalService.animalFilter.type;
        vm.filter.type = '';
        $timeout(function () {            
            vm.filter.type = type; 
        },30);

It appears that ng-model on the list is binding before the list is bound and depending on how quickly the page renders this causes a binding issue. The second list which uses static values bind correctly.

I have run into this a few times now, but it throws me off every single time until I remember that I need to delay binding. This really shouldn't be necessary - is there a better way to accomplish this or possibly a binding bug with a timing issue?

[ryanhart2]

There are some comments here that may be relevant #6088. Is there a reason you are not using ng-options?

[RickStrahl]

I suppose ng-options would work.

In general I don't use ng-options, if the data bound is simple. Using ng-options makes the above code (assuming I didn't have to do the $timeout() bit) more complex by requiring a handler to assign the value to the model as well as requiring the nasty, difficult to visually parse ng-options expression syntax.

Verfied that ng-options works as expected, but does add a bit of overhead as you have to preassign the object, then add an extra handler to assign the value to the actual underlying model, so that solves my immediate problem.

But I still find it curious that ng-repeat binding to options would fail when the data loaded is static.

Thanks.

[ryanhart2]

I updated the plunk to show the ng-options version side-by-side with the ng-repeat version.
http://plnkr.co/edit/YzXSYYzf6DG1cXrcDSgw?p=preview
I only had to add ng-options="type for type in vm.animalTypes" to the select element and then remove this line <option ng-repeat="type in vm.animalTypes" value="{{type}}">{{type}}</option>

Not that it's important for this example, but I also corrected the default options to have value="" instead of value=" ".

[Narretz]

It works when you use ng-value={{type}} I assume the value attribute isn't interpolated in time for the options directive to pick up the value. It's pretty strange that this doesn't work, since this is the most basic use case for select + ngRepeat.

[Narretz]

It also works when you use <option ng-repeat="type in vm.animalTypes">{{type}}</option> because the directive will use the text instead of the label. This is crazy.