Select with ng-repeat generated optgroups and options does not set selected properly

[sgronblo]

I'm not really sure if this is a bug or just me not using Angular properly.

I have a select that is not using ng-options, instead I'm using ng-repeat to iterate over a list of hashes to create my own optgroup and options. The problem is that my my empty options with value="" gets set to selected.

By messing around a little bit in the debugger I can see that the options are not processed at the time that the select directive is trying to set the right options to selected. It consults the optionMap which is empty at the time which causes the empty option to be selected.

My speculation (currently based on zero knowledge about how watch is used in this case) is that a watch is always triggered once. At this stage we have no added options yet so the watched expression gets set to the current value and the empty option is selected. After that the inside of the select is processed (compiled) I think which causes the options to be added to their containing select controller. Now if the select controller was re-rendered it would probably work to set the selected status. However now the watch already thinks it has updated the view to the correct state because it already called render and the value it rendered has not changed since.

[pkozlowski-opensource]

@sgronblo there are corner cases that makes select directive not playing nice with options generated by ng-repeat and this is why ng-options is the recommended approach. Is there anything that prevents you from using ng-options?

[sgronblo]

I got the feeling that you can't specify the order of the optgroups manually when using ng-options?

[pkozlowski-opensource]

sure you can, provided that you are iterating over an array - in this case you can just sort it using the orderBy filter.

[sgronblo]

I thought that was only for ordering the options themselves? Would you be kind enough to provide an example?

[IgorMinar]

can you please provide a plunker or jsfiddle reproducing the problem?

[Narretz]

You can use orderBy with multiple predicates to first order by group, then by label. See http://jsfiddle.net/UWfbr/54/
If you want to set the order completely manually, you'll have to write your own order function for orderBy.