AngularJS Bug

Demonstrates bug with AngularJS with IE where SELECTs don't display the data-bound value until clicked w/ mouse (i.e. tabbing into the field shows binding expression).

by Alexander

HTML

<div ng-app="zquestions">
  <div ng-controller="questionCtrl">
    <select ng-model="app.Answer" ng-options="app.id as app.description for (id, app) in model.apps"></select>
    <div ng-repeat="question in model.questions">
      <br>
        <div>Doesn't Work []</div>
        <select ng-model="question.Answer" ng-required="false">
          <option value="" disabled>{{question.placeholder}}</option>
          <option ng-repeat="item in question.lov|filter:question.runtimefilter" value="{{item.value}}">{{item.description}}</option>
        </select>
      <br>
        <div>Doesn't Work</div>
        <select ng-model="question.Answer" ng-required="!(question.required && question.visible)">
          <option value="" disabled>{{question.placeholder}}</option>
          <option ng-repeat="item in question.lov|filter:question.runtimefilter" value="{{item.value}}">{{item.description}}</option>
        </select>
      <br>
        <div>Works!!</div>
        <select ng-model="question.Answer" ng-required="triggerRequiredValidation()">
          <option value="" disabled>{{question.placeholder}}</option>
          <option ng-repeat="item in question.lov|filter:question.runtimefilter" value="{{item.value}}">{{item.description}}</option>
        </select>
      </div>
  </div>
</div>

JavaScript

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

app.controller('questionCtrl', function ($scope) {
  $scope.model = {};
  $scope.model.apps = [{
    "id": 1,
    "description": "Option #1"
  }, {
    "id": 2,
    "description": "Option #2"
  }, {
    "id": 3,
    "description": "Option #3"
  }, {
    "id": 4,
    "description": "Option #4"
  }, {
    "id": 5,
    "description": "Option #5"
  }, {
    "id": 6,
    "description": "Option #6"
  }];

  $scope.model.questions = [{
    "Answer": null,
    "placeholder": "Select State...",
    "required": true,
    "visible": true,
    "triggerRequiredValidation": function () {
      return this.required && this.visible;
    },
    "lov": [{
      "value": "AK",
      "description": "Alaska"
    }, {
      "value": "AL",
      "description": "Alabama"
    }, {
      "value": "AR",
      "description": "Arkansas"
    }, {
      "value": "AZ",
      "description": "Arizona"
    }, {
      "value": "CA",
      "description": "California"
    }, {
      "value": "CO",
      "description": "Colorado"
    }, {
      "value": "CT",
      "description": "Connecticut"
    }]
  }];
});