How to set a custom object value in angular ng-options?

Question

I have a array opts with the different options for a <select> element. Array's objects have a property text for display and a property value for get the value and set in a variable $scope.opt2.

Controller:

function MyCtrl($scope) {
    $scope.opts = [
        {value: 10, text: '1st' },
        {value: 20, text: '2nd' }
    ];
}

I want set:

• $scope.opt2 = {ref: 10} and show 1st when the first option is selected
• $scope.opt2 = {ref: 20} and show 2nd when the second option is selected

I tried:

<select ng-model="opt2" ng-options="{ref: obj.value} as obj.text for obj in opts">

The value sets correctly but the text is not show. Any solution?

Examples for testing: http://codepen.io/ces/pen/azbLzX

Answer 1

While Philipps response will work, it's a little more complicated then you need it to be, change your select to this:

<select ng-model="opt2.ref" ng-options="obj.value as obj.text for obj in opts">

See the edited codepen here: http://codepen.io/anon/pen/XJWeVQ