Q:

Select control data-binding doesnt work in IE9

I have a dropdown control data-bound as follows:
 <select name="trafficGroup" class="form-control input-sm"
                    ng-model="monitoringProbe.tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup"
                    required
                    ng-style="{'width':'100%'}"
                    ng-disabled="!monitoringProbe.tdmCapture.selectedTDMCard.isEditMode"
                    ng-if="monitoringProbeTDMCaptureData.trafficGroups.length > 0">
            <option value="{{tg.id}}"  ng-repeat="tg in monitoringProbeTDMCaptureData.trafficGroups" > {{tg.name}}</option>
            </select>

I explicitly set the value for monitoringProbe.tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup, as follows because otherwise its default value gets empty:
          if(tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup == 0)
                    tdmCapture.selectedTDMCard.timeSlotProperties.trafficGroup = app.meta.monitoringprobe.tdmCaptureTabData.trafficGroups[1];

This works fine in all browsers except in IE9. in IE9 what I see in dropdown is {{ tg.name }}
I added ng-if="monitoringProbeTDMCaptureData.trafficGroups.length > 0" to avoid this, but still the issue is there.
Any idea how to fix-it?

A:

Instead of using ng-repeat with the option tag, you can use the ng-options attribute of the select directive. I'm not positive if this will resolve the issue you're seeing, but it's typically the better approach.
<select ng-options="tg.id as tg.name for tg in monitoringProbeTDMCaptureData.trafficGroups">
</select>

If you want the default value to be empty, you just include a single option tag with an empty value.
<select ...>
    <option value=""></option>
<select>

