Only the first character displays in (HTML) listbox elements after async call

I have a question about AngularJS/IE9.

I have modal window with patient list.

    <div class="modal-header">
        <h3 class="modal-title">Patient list</h3>
    </div>
    <div class="modal-body">
    <div>
         <input class="form-control" ng-model="searchText"/>
    </div>
    <div class="col-md-12">
        <select size="15" class="list-group">
            <option ng-repeat="patient in patientList | filter:searchText" ng-click="..">
                {{patient.patientName}}
            </option>
        </select>
    </div>

Patient list loaded with $http factory

.factory('patientService', function ($http) {
    return {
        getPatientList: function () {
            return $http.get("Api/Patient/GetFullPatientList")
                .then(function (results) {
                    return results.data;
                }, function (results) {
                    console.log("Error: " + results.data + "; " + results.status);
                });
        };

So, this service inject to PatientController

function PatientController($scope, $modalInstance, patientService) {
    $scope.patientList = patientService.getFullPatientList();
}

In Chrome, FF, Safari I get correct view of patient listbox on UI, but in IE9 I get follow screen: http://take.ms/m0mFz Only first symbols in list items shows.

When, I replace listbox on (for example) simple list - all works fine.

I think, it happens because data loaded with async call, and IE no refresh data. So, I try do it smth like this:

    function PatientController($scope, $modalInstance, patientService) {
        $scope.patientList = patientService.getFullPatientList().then(function(data){
            $scope.patientList = data;
            $scope.$apply();
        });
    }

But it's also did not bring results.

Please, help or advice me :) Thanks!

Answers


The issue was with incorrect listbox display. By default, in IE9, "display" property in select styles is unspecified.

I resolve it with JQuery code:

patientService.getFullPatientList().then(function(data) {
    $scope.patientList = data;
    $('.list-group').width('95%'); //SOLVE
});

Need Your Help

Accessing protected components after a document becomes unprotected

c# ms-word vsto office-interop word-2010

I'm looking to modify a document inside a DocumentOpen event, adding some content controls to existing text where appropriate and changing formatting. This works fine, but becomes more complicated ...