AngularJS default option in select not working in IE9

Question

I have a form in my AngularJS application, which contains dropdowns with default options. I use ng-init and ng-selected to make this happen. It works fine in Chrome, but in Internet Explorer 9, when i first load the page, what shows up on the dropdown is the literal angularjs expression, ie "{{ showMethod(args) }}". When i go and change the option, the options are there as they should. It is just initially that the expression doesn't get expressed.

Here is my HTML code:

<td>
    <div ng-if="var.methods.length==0">NA</div>
    <div ng-if="var.methods.length>0">
        <select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)" ng-model="selectedmethods[var.id]" >
           <option ng-repeat="method in var.methods" value="{{method.id}}" ng-selected="isMethodSelected(var.id,method)">{{ showMethod(method,var.id)}}</option>
        </select>
    </div>

This is part of another ng-repeat.
Initially, i set the selected method to the default method for that variable using ng-init. Using ng-selected and a method called isMethodSelected, i check if the method has been selected by the user by checking the selectedmethods object and if not, check if the method is a defaut method. Then, i display the method name using showMethod function, which i added to see if this would help the issue in IE (which it didn't). What i had before was just the expression method.formattedMethodName.

Here is part of my JS code:

$scope.isMethodSelected = function(varid,method) {
       var sel = false;
       if($scope.request.specsByVar.hasOwnProperty(varid) && $scope.request.specsByVar[varid].method.id==method.id) {
           sel = true;
       } else if(!$scope.request.specsByVar.hasOwnProperty(varid) && method.defaultMethod) {
           sel = true;
       }
       return sel;
   }

   $scope.defaultMethod = function(varid,methods) {
       var defaultMethod;
       if($scope.request.specsByVar.hasOwnProperty(varid)) {
           defaultMethod = $scope.request.specsByVar[varid].method.id;
       } else {
           for (var i = 0; i < methods.length; i++) {
               if(methods[i].defaultMethod) {
                   defaultMethod = methods[i].id;
                   break;
               }
            }
       }
       return defaultMethod;
   }

   $scope.showMethod = function(method,varid) {
       if(method) {
           return method.formattedMethodName;
       } else {
           return $scope.selectedmethods[varid].formattedMethodName;
       }
    };

This is apparently an IE issue. Does anyone have a solution?

Thanks, Olga

Answer 1

I was able to solve this issue by using ng-options:

    <select ng-init="selectedmethods[var.id]=defaultMethod(var.id,var.methods)" 
         ng-model="selectedmethods[var.id]" title="{{ selectedmethods[var.id].formula }}" 
         ng-options="method.id as method.formattedMethodName for method in var.methods | filter:{active:true}">

    </select>