Angular: broken select in IE9

by stiucsib86

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<table ng-controller="AnimalCtrl">
  <tr ng-repeat="animal in animals">
    <td>
      <select ng-model="animal.category" ng-options="m.name for m in categories" ng-change="changeCategory($index)">
      </select>
    </td>
    <td>
      <select ng-model="animal.kind" ng-options="m for m in animal.category.kinds">
      </select>
    </td>
  </tr>
</table>

JavaScript

var hwcalcModule = angular.module('ie9select', []);
  
  function AnimalCtrl ($scope) {
      $scope.categories = [
          {
              name: "Cats",
              kinds: ["Lion", "Leopard", "Puma"]
          },
          {
              name: "Dogs",
              kinds: ["Chihua-Hua", " Yorkshire Terrier", "Pitbull"]
          }
      ];

      $scope.animals = [
        {
          category: $scope.categories[0],
          kind: $scope.categories[0].kinds[0]
        }
      ];

      $scope.changeCategory = function (index) {
        $scope.animals[index].kind = $scope.animals[index].category.kinds[0];
      }
  }