AngularJS : Ng-Options in Array of Arrays inside select

Question

I am trying show options from array of array inside a select drop down but it is not showing up. Can someone tell me what I am doing wrong here ? https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview

HTML :

<div ng-controller="MainCtrl">
   <table>
     <tr ng-repeat="r in rows track by $index">
         <td> 
            <select ng-model="r.name" 
                   ng-options="option.name as option.name for option 
                                           in availableOptions">
                <option value="">Select Value</option>
            </select>
         </td>
          <td> 
              <select ng-model="r.value"
       ng-options="opt.name for opt in option.value for option  in availableOptions | filter:{name: r.name}">
       <option value="">Select Value</option>
        </select>
         </td>
         <td> 
             <input type="button" ng-click="addRow()" value="Add">
         </td>
         <td>
             <input type="button" ng-click="deleteRow($index)" 
                 value="Delete">
        </td>
    </tr>
  </table>

  <div>
    {{rows}}
  </div>

JS :

 var bb = [];
  bb.push({name:"CCCC"});
  bb.push({name:"AAAA"});
  bb.push({name:"DDDD"});  

   var aa = [];
  aa.push({name:"CCCC"});
  aa.push({name:"AAAA"});
  aa.push({name:"BBBB"}); 

   var cc = [];
  cc.push({name:"BBBB"});
  cc.push({name:"AAAA"});
  cc.push({name:"DDDD"});


   var dd = [];
  dd.push({name:"CCCC"});
  dd.push({name:"AAAA"});
  dd.push({name:"CCCC"});

  $scope.availableOptions = [
                { name: 'TestA',
                  value : aa
                },
                { name: 'TestB',
                value : bb
                },
                { name: 'TestC',
                value : cc

                },
                { name: 'TestD',
                  value : dd

                },
                { name: 'TestE',
                  value : []
                }

            ];

How do I specify the ng-options for value which is an array filtered based on name: 'TestE' or something ?

Answer 1

The are two problem sin your code :

1# you did not assign value to all aa,bb,cc,dd they were empty

2# Filter would return you array so you need to use its 1st element like this

       <select ng-model="r.value" 
               ng-options="option.name as option.name for option 
                                       in (availableOptions | filter:{name: r.name})[0].value">
            <option value="">Select Value</option>
        </select>

See this https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview