Handle selectbox update in Angular directive - angularjs

Question

uiModel.appreciation is a key / value object:
{ "key": "B", "value": "Better"}
In my Directive:
scope.appreciationsArray = [{key: 'A', value: 'Good'}, {key: 'B', value: 'Better'}, {key: 'C', value: 'Best'}];
Directive template:
<select name="type" ng-change="onChangeAppreciationSelectBox($index)" class="form-control" ng-disabled="disabled" required ng-model="uiModel.appreciation.key" data-ng-options="appreciationObj.key as appreciationObj.value for appreciationObj in appreciationsList">
</select>
This renders a nice select box and sets the selected item to B / Better.
When changing to another item I want the uiModel.appreciation object to be updated accordingly. So far only the key is updated, the value propertyhowever keeps its initial value.
Looking for the correct Angular way to do it, must be possible without the use of custom Javascript right?

Answer 1

Use the appreciation as the model and as the selector in the comprehension expression instead of the key property:
<select
ng-model="uiModel.appreciation"
ng-options="appreciation.value for appreciation in appreciations">
angular.module('MyModule', [])
.controller('MyController', function($scope) {
$scope.uiModel = {
appreciation: {
"key": "B",
"value": "Better"
}
}
$scope.appreciations = [{
key: 'A',
value: 'Good'
}, {
key: 'B',
value: 'Better'
}, {
key: 'C',
value: 'Best'
}];
$scope.uiModel = {
appreciation: $scope.appreciations[0]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller='MyController'>
<p>Selected appreciation: {{uiModel.appreciation | json}}</p>
<select
ng-model="uiModel.appreciation"
ng-options="appreciation.value for appreciation in appreciations">
</select>
</div>