AngularJS选择不显示模型对象

Question

AngularJS doesn't seem to be showing my default value (model) for select if I hard code in an object value like the following.

html :

<select ng-model="defaultOption" ng-options="o.vala for o in options"></select>

javascript :

$scope.options = [ 
    {vala: "value1a", valb: "value1b"}, 
    {vala: "value2a", valb: "value2b"} 
];
$scope.defaultOption = {vala: "value1a", valb: "value1b"};

Yet if I change $scope.defaultOption to $scope.options[0] , I get my default option showing on the select no problem.

Why is this happening, and is there a way I can keep

$scope.defaultOption = {vala: "value1a", valb: "value1b"};

instead of using the indirect referencing?

jsfiddle: http://jsfiddle.net/64ycY/8/

(uncomment the other $scope.defaultOption for comparison)

Answer 1

Here's one possible solution, as discussed in the question comments above, using underscore.js (could just really be done with a small function instead of pulling in underscore.js)

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

app.controller('MainController', function($scope) {
    $scope.options = [ 
        {vala: "value1a", valb: "value1b"}, 
        {vala: "value2a", valb: "value2b"} 
    ];
    var setDefaultOption = function(option) {
        $scope.defaultOption = _.findWhere($scope.options, option);
    }
    setDefaultOption({vala: "value1a", valb: "value1b"});
});

http://jsfiddle.net/Dogbert/64ycY/9/