This may do, if the length of the chain is fixed:
<input type="hidden" name="selection"
value="{{ (selectedSubSubItem || selectedSubItem || selectedItem).name }}"/>
To solve the problem with going backwards to the chain, a simple solution is to use ng-change
and nullify all the next values, i.e.:
<select ng-model="selectedItem" ng-options="i.name for i in items"
ng-change="selectedSubItem=null;selectedSubSubItem=null"></select>
See forked fiddle: http://jsfiddle.net/zH77p/1/
Alternatively to the ng-change
, you can use watches in the scope; the advantage is that the watches only need to know their immediate child:
$scope.$watch("selectedItem", function(newval, oldval) {
if( newval !== oldval ) $scope.selectedSubItem = null;
});
$scope.$watch("selectedSubItem", function(newval, oldval) {
if( newval !== oldval ) $scope.selectedSubSubItem = null;
});