array in object in ng-options

Question

I am having problems in getting an array inside of an object into an ng-options.

I have following array of objects with inside another array:

$scope.array = [{name: "jan", ar=["car", "bus", "bike"]}, {name: "tom", ar=["milk", "water", "bike", "walking"]}, {name: "kim", ar=["star", "car"]}]

I would like to make a select with the options jan, tom and kim. But that isn't a problem:

<select ng-options="o.name for o in array" ng-model="choosen.nOption">

however when they choose an option a new select should start with as options the array ar from that name:

<select ng-if="choosen.nOption!=undefined" ng-options="o.ar for o in array.ar | filter: {name: choosen.nOption}">

Can anyone help how I could get the values of the inside array?

You can find a fiddler at https://jsfiddle.net/brokenhip/phxyap8a/

Solution: https://jsfiddle.net/brokenhip/phxyap8a/2/

<select ng-options="o.name for o in arrayA" ng-model="choosen.nOption"></select>

         <select  ng-if="choosen.nOption!=undefined" ng-options="o for o in choosen.nOption.ar" ng-model="choosen.nOption2"> </select>

Answer 1

So i found an easy way is to use $watch to see when the first select change.

In your controller add this :

    $scope.$watch('choosen.nOption',function(newVal){
          $scope.choosenOption = newVal['ar'];
          console.log($scope.choosenOption); // check in your console
      });  

And in your HTML, you don't need a filter:

  <select  ng-if="choosen.nOption!=undefined" ng-options="opt for opt in choosenOption" ng-model="choosen.nOption2"> </select>