Nested options using angular

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