Angular async options

Shows a bug in older versions of angular that fails to update a select when its options are updated asynchronously

by TwitchBronBron

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-controller="MyController">
     <label>synchronously loaded</label>
      <select ng-model="station.countyNumber" 
              ng-options="option.countyNumber as option.countyNumber for option in syncCounties">
       </select>
    <br/>
    <label>asynchronously loaded</label>
    <select ng-model="station.countyNumber" 
            ng-options="option.countyNumber as option.countyNumber for option in asyncCounties">
        </select>
    <br/>
    <br/>
    Selected County Number: {{station.countyNumber}}
</div>

CSS

label{
    display:inline-block;
    width:150px;
}

JavaScript

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

app.controller('MyController', function ($scope, $timeout) {

    $scope.station = {
        "countyNumber": "01"
    };

    $scope.syncCounties = [{
        "countyNumber": "01",
            "countyName": "ADAMS"
    },{
        "countyNumber": "02",
            "countyName": "ALLEGHENY"
    }];

    $scope.asyncCounties = [];
    //add the counties asynchronously
    $timeout(function () {
        $scope.asyncCounties = $scope.syncCounties;
    }, 100);

});