ng-options populated by ajax only displaying first letter in IE

Question

I am experiencing an odd issue in Angular, seemingly only in Internet Explorer 9.

If you check the following jsfiddle: http://jsfiddle.net/U3pVM/382/

You can see that the 2 selects are populated, but the display in IE seems broken, and only the first letter, 'A' of 'Apple' is selected. All options display when the select is clicked on.

.

The code is very simple, I populate the variable that drives the select in the success callback.

.success(function (data) {
    $scope.ReasonsChoice_ajax = data;
});

The ng-options code for the select is as follows;

 <select ng-model="Reason" ng-options="Reason for Reason in ReasonsChoice_ajax"></select>

I have noticed that the glitch doesn't happen if I am using a single select element, it is only when I display multiple selects in an ng-repeat that the issue happens.

Answer 1

You are using Angularjs so the answer is like this:

<select ng-style="{'width': '100%'}"></select>

Note that you don't have to set width as 100%. You can use px instead.

Answer 2

See <select> only shows first char of selected option

We had the same issue and something like what's below got us around it.

$("select").css("width", $("select").css("width"));

Of course, all of our selects are the same width. You may need to refine the selector to suit your needs. Basically you just need to force IE to repaint the selects one way or another. Updated fiddle.