Angular: Select value

http://angularjs.org/

by johnwun

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<div ng-controller="Main" ng-app>
    <div>selections = {{selections}}</div>
    
    <div>
      <p>Model doesn't get updated when selecting:</p>
      <select ng-repeat="selection in selections" ng-model="selection" ng-options="i.id as i.name for i in items">
        <option value=""></option>
      </select>
    </div>
  
    
    
            
    <div>
        <p>Cannot get ng-repeat and $index to work. Try <button ng-click="reset()">resetting values</button> and then selecting Name 1 in first box; notice another box will also get incorrectly selected</p>
      <span ng-repeat="selection in selections">
        <select ng-model="selections[$index]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>
       </span>
    </div>
        
    <div>
        <p>Explicitly specifying array index works</p>

        <select ng-model="selections[0]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[1]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[2]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>
    </div>
    
    <div>
        <p>Setting values <button ng-click="sample()">programmatically</button> works, but not if I have already selected a value in the top selects.</p>
     </div>

</div>

CSS

div {
    margin-bottom: 2em;
}

JavaScript

function Main($scope) {

    $scope.selections = ["", "id-2", ""];

    $scope.reset = function() {
        $scope.selections = ["", "", ""];
    };
    
    $scope.sample = function() {
        $scope.selections = [ "id-1", "id-2", "id-3" ];
    }
    
    $scope.items = [{
        id: 'id-1',
        name: 'Name 1'},
    {
        id: 'id-2',
        name: 'Name 2'},
    {
        id: 'id-3',
        name: 'Name 3'}];
}