AngularJS can't get months dropdown to display in order

I can't seem to get the months to show properly, October always comes after January because its value is 10... which I am assuming somehow in some sorting is less than 2. Here is the fiddle for the code:

http://jsfiddle.net/naZQA/

<select ng-model="month" ng-options="key as value for (key,value) in months"></select>

I had the same issue with countries where I couldn't get USA to appear as second entry as it would do its own crazy sorting.

Any help appreciated.

Using ng-options with an object is just iterating over the object properties which aren't guaranteed to be in any order. If you can change it to be an array, they are guaranteed to be in the order specified. Updated fiddle. Then the select looks like this:

<select ng-model="month" ng-options="currMonth for currMonth in months"></select>

If you needed to keep the same values for the ng-model, you can also have an array of key/value pairs. See this fiddle Then the select looks like this:

<select ng-model="month" ng-options="currMonth.key as currMonth.value for currMonth in months"></select>

It was discussed in this question here . And hence angular does not allow to use orderBy with simple hashes, you are not able to proceed with sorting without restructuring your data. Here's a fiddle with changed data structure fiddle

Update: updated link to fiddle

Try this workaround I commented in AngularJS select docs.
Use months.indexOf(m) as the select value.

<select ng-model="monthIndex" ng-options="months.indexOf(m) as m for m in months"></select>

This way you can use a simple string array as the source and have ng-model updated with the selected index.
Try it here: jsbin