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

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.

eg.

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.

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.

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.

I just experienced this same problem in IE 9. The workaround is to only show the select after the ajax data is available. A simple solution in AngularJs is to add follow to the select: ng-show="ReasonsChoice_ajax.length > 0".

<select ng-model="Reason" ng-show="ReasonsChoice_ajax.length > 0" ng-options="Reason for Reason in ReasonsChoice_ajax"></select>

When my project got a very late change in requirements to also support IE9 I didn't want to go back and annotate all of my <select> elements or controllers to deal with this problem, so I wrote the following directive to add behavior to all of them automatically: 

angular.module('xxxxx')
.directive('select',
           ['$log', '$parse', '$timeout', function ($log, $parse, $timeout) {
    var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
    return {
        restrict: 'E',
        scope: true,
        require: ['select', '?ngModel'],
        link: function (scope, elem, attrs, control) {
            var isIE = document.attachEvent,
                match; 

            if (isIE
                && attrs.ngOptions
                && (match = attrs.ngOptions.match(NG_OPTIONS_REGEXP))) {
                var values = $parse(match[7]);
                scope.$watchCollection(values, function () {
                    // Redraw this select element 
                    $timeout(function () {
                        var originalWidth = $(elem).css('width');
                        $(elem).css('width', '0');
                        $(elem).css('width', originalWidth);
                    }, 10);
                });
            }
        }
    };
}]);