Nested options using angular - html

Question

$scope.senders = {}
$scope.senders.list = [{name: NYC, supportedSendingMethods: ['Send by mail', 'Send by sms', 'c']}, {name: GEN, supportedSendingMethods: ['Send by mail','Send by sms','c']}];
$scope.senders.selected = $scope.senders[0];
$scope.senders.selectedSending = $scope.senders[0].supportedSendingMethods[0];
First select:
<select ng-model="senders.selected" ng-options="sender.name for sender in senders">
</select>
//This one works as expected
Supported sending method:
<select ng-model="senders.selectedSending" ng-options="supp.supportedSendingMethods for supp in senders | filter:{name:senders.selected.name} ">
</select>
The last select shows all supported sending methods for the selected sender. The problem is that the options in the second select are arraylists themselves.
How can I go one level deeper (with filters) and show
1) show the supportedSendingMethods
2) of the selected sender?

Answer 1

As you already have selected sender stored into senders.selected variable then why just not use it? This is the best option I think:
ng-options="supp for supp in senders.selected.supportedSendingMethods"
Just to answer the original question I may propose two ways achieve what you need with filtering expression. One way is just access first item of the filtered collection - angular.js supports such expressions:
ng-options="supp for supp in (senders | filter:{name:senders.selected.name})[0].supportedSendingMethods "
Another option is to define separate filter for that - it will look better a bit:
ng-options="supp for supp in senders | filter:{name:senders.selected.name} | getFirst:'supportedSendingMethods'"
You may see all ways in actions here - http://jsfiddle.net/GRaAL/WMAea/.

Answer 2

You can try this way without filters. Th point is to set model of senders.currentSender as list for second select:
HTML
<div ng-controller="fessCntrl">
<select ng-model="senders.currentSender"
ng-options="sender.name for sender in senders.list"></select>
<select ng-model="supp"
ng-options="supp for supp in senders.currentSender.supportedSendingMethods"
ng-init="supp=senders.currentSender.supportedSendingMethods[0]"
></select>
</div>
JS
var fessmodule = angular.module('myModule', []);
fessmodule.controller('fessCntrl', function ($scope) {
$scope.senders = {};
$scope.senders.list = [{
name: 'NYC',
supportedSendingMethods: ['Send by mail1', 'Send by sms1', 'c1']
}, {
name: 'GEN',
supportedSendingMethods: ['Send by mail2', 'Send by sms2', 'c2']
}];
$scope.senders.currentSender = $scope.senders.list[0];
$scope.supp = $scope.senders.currentSender.supportedSendingMethods[0];
});
By adding the $watch we can now select by default 1st value:
$scope.$watch(function () {
return $scope.senders.currentSender;
},
function (newValue, oldValue) {
$scope.supp = newValue.supportedSendingMethods[0];
}, true);
Demo Fiddle