Dropdown in IE9+ fails to replace option text

[adamzuckerman]

Failing jsfiddle example: http://jsfiddle.net/fa3kq/

This only occurs in IE8+ using any version of AngularJS from at least 1.2.1 onward.

Using the Tab key, tab until the lower dropdown is highlighted. Then using the arrow keys, press the down arrow to see the unchanged description for the option. If you click on the dropdown, the display is correct.

If I could set the first dropdown's selected option, I would use that syntax. That does not appear to be possible without writing some javascript to set the default value after loading my dropdowns.

HTML:

<div ng-app="zquestions">
    <div ng-controller="questionCtrl">
        <select id="ddApps" name="ddApps" ng-model="app.Answer" ng-options="app.id as app.description for (id, app) in model.apps">
            <option value="" disabled>Select an application...</option>
        </select>
        {{app.Answer}}
        <div ng-repeat="question in model.questions">
            <div class="control-group">
                <select id="{{question.id}}" name="{{question.Name}}" ng-model="question.Answer" class="{{question.inputclass}}" ng-required="question.required && question.visible" title="{{question.title}}" ng-disabled="question.enabled == false" ng-cloak>
                    <option value="" disabled>{{question.placeholder}}</option>
                    <option ng-repeat="item in question.lov" value="{{item.value}}" ng-selected="{{item.value == question.defaultvalue}}" ng-hide="{{item.hidden}}" ng-disabled="{{item.hidden}}">{{item.description}}</option>
                </select>
            </div>
            {{question.Answer}}
        </div>
    </div>
</div>

Javascript:

var app = angular.module('zquestions', []);

app.controller('questionCtrl', function ($scope) {
    $scope.model = {};
    $scope.model.apps = [{
        "id": 1,
        "programId": 14,
        "description": "Application for something special",
        "active": true,
        "sortorder": 10
    }, {
        "id": 2,
        "programId": 11,
        "description": "Application for something beyond belief",
        "active": false,
        "sortorder": 20
    }, {
        "id": 3,
        "programId": 8,
        "description": "Application for something out of this world",
        "active": true,
        "sortorder": 30
    }];
    $scope.model.questions = [{
        "id": 121,
            "Name": "Contact_State",
            "label": "State:",
            "type": 4,
            "Active": true,
            "required": true,
            "enabled": true,
            "Template": false,
            "title": "Select the state from the list below.",
            "placeholder": "Select state",
            "defaultvalue": null,
            "Answer": null,
            "maxlength": -1,
            "editmask": null,
            "labelclass": null,
            "inputclass": null,
            "lov": [{
            "applicationId": "1",
                "value": "AK",
                "description": "Alaska",
                "hidden": "false"
        }, {
            "applicationId": "1",
                "value": "AL",
                "description": "Alabama",
                "hidden": "false"
        }, {
            "applicationId": "1",
                "value": "AR",
                "description": "Arkansas",
                "hidden": "false"
        }, {
            "applicationId": "1",
                "value": "AZ",
                "description": "Arizona",
                "hidden": "false"
        }, {
            "applicationId": "2",
                "value": "CA",
                "description": "California",
                "hidden": "false"
        }, {
            "applicationId": "2",
                "value": "CO",
                "description": "Colorado",
                "hidden": "false"
        }, {
            "applicationId": "2",
                "value": "CT",
                "description": "Connecticut",
                "hidden": "false"
        }],
            "containerclass": "container container-width-one-quarter",
            "visible": true,
            "MinValue": null,
            "MaxValue": null,
            "LookupID": null,
            "Subform": null
    }];
});

[tbosch]

Hi,
could you try again using ngOptions? It was made for those cases, especially to make IE behave :-)

[tbosch]

See http://docs.angularjs.org/api/ng/directive/select

[adamzuckerman]

I have two selects in the example above. The first select uses ngOptions and IE behaves correctly. The second select does not and IE does not either.

Using the first select with ngOptions does not provide any way for me to set the selected option, hide the option, or disable the option. My situation requires that I have cascading data changes when another field changes, hence the hide, disable, and set defaults.