JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<div data-ng-app="myApp" ng-strict-di>
<div data-ng-controller="myController">
<hr>
<select data-ng-model="currentElement" data-ng-options="element.name for element in elements" data-ng-change="updateDeeperOption()">
</select>
<select data-ng-model="deeperOption" data-ng-options="option.name for option in availableOptions track by option.value" data-ng-change="writeDeeperOptionToCurrentElement()">
</select>
<hr>
<tt>{{currentElement}}</tt>
<hr>
<tt>{{elements}}</tt>
</div>
</div>
JavaScript
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function($scope) {
$scope.updateDeeperOption = function() {
$scope.deeperOption = $scope.availableOptions.filter(isMatchingOption)[0];
};
$scope.writeDeeperOptionToCurrentElement = function() {
$scope.currentElement.going.deeper.to.myOption = $scope.deeperOption.value;
};
$scope.availableOptions = [{
'name': 'None',
'description': 'Oh noo!',
'value': 0
}, {
'name': 'Some',
'description': 'At least a few',
'value': 1
}, {
'name': 'Many',
'description': 'The way it should be',
'value': 2
}, {
'name': 'All',
'description': 'Yeahh',
'value': 3
}];
$scope.elements = [{
'id': 1,
'name': 'First Element',
'going': {
'deeper': {
'to': {
'myOption': 1
}
}
}
}, {
'id': 2,
'name': 'Second Element',
'going': {
'deeper': {
'to': {
'myOption': 2
}
}
}
}, {
'id': 3,
'name': 'Third Element',
'going': {
'deeper': {
'to': {
'myOption': 3
}
}
}
}];
$scope.currentElement = $scope.elements[0];
$scope.updateDeeperOption();
function isMatchingOption(option) {
return option.value === $scope.currentElement.going.deeper.to.myOption;
}
}]);