How to set a default ngOptions value, when options are objects, and default is an integer ID

Question

I'm working with ngOptions to display a select element, and want to connect the model to the value that's set as the value in ngOptions.

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

app.controller('TestCtrl', ['$scope',
  function ($scope) {
    //Use random to simulate different data from an API
    $scope.default = Math.floor(Math.random()*3);
    $scope.options = [
      {
        id: 0,
        name: "Option 1"
      },
      {
        id: 1,
        name: "Option 2"
      },
      {
        id: 2,
        name: "Option 3"
      }
    ];
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
  <div ng-controller="TestCtrl">
    <select ng-model="default" ng-options="val.name for val in options track by val.id">
    </select>
    <pre>Default should be ID {{default}}, or Option {{default+1}}
  </div>
</div>

I've tried using track by, select as, and I've found two solutions that work, but are not ideal.

Ideally, I'd be able to set default

Solution 1:

// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
  // Compare ID to what the default should be
  if (v.id === $scope.default) {
    // Set object to default
    $scope.default = v;
    return true;
  }
});

Solution 2:

JS

$scope.options = {
  "Option 1": 0,
  "Option 2": 1,
  "Option 3": 2
};

HTML

<select ng-model="default" ng-options="value as key for (key, val) in options">

The thing that's tough about this solution is it only works if the object has no more than two values, since a key cannot be an object.

Is there any way to have Angular set a default by key, without having to include the entire object?

Answer 1

try it like this

<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>

then in controller

$scope.selected = 1;

similar plunkr example