javascript - Using Angular to repeat over nested object -

i looked through previous questions on topic not find looked this.

my problem want make second html radio button array depend on which radio button selected first. array of objects come me this:

"names":[{            "name": "fido",           "id": "1",           "type": [                 {                    "typename": "dog",                 "typeid": "1"             },             {                 "typename": "cat",                 "typeid": "2"             },             {                 "typename": "mouse",                 "typeid": "3"             }         ]     },     {         "name": "bella",         "id": "2",         "type": [             {                 "typename": "cat",                 "typeid": "2"             },             {                 "typename": "mouse",                 "typeid": "3"             }         ]     }] 

my angularjs code looks this:

  <label ng-repeat="item in namelist.names">             <input type="radio" name="name" ng-model="$parent.selectedname"             ng-value="item"> {{item.name}} </input>           <label ng-repeat="item in namelist.names[$parent.selectedname.id].type"> <input             type="radio" name="type" ng-model="$parent.selectedtype"             ng-value="type"> {{item.typename}}</input>          </label>   </label> 

i'm quite sure isn't working due $parent.selectedname.id part - ng-repeat creates child scope "grandchild" of original scope means $parent referring above script , not rest of code.

is there way work around can have list changes options based on first selected value?

edit: want want able select radio button (in case "fido" or "bella") , depending on selection have either array of "type" pop in second radio button list. there way make work or need split "names"-object?

you should show optional options outside of ng-repeat, , set selected item other scope value. see snippet.

note: reason radio-button ng-model cannot set on scope variable, needs attribute of object. don't know why.

angular      .module('someapp', [])      .controller('somecontroller', function($scope){    $scope.name = {      selected: null    };    $scope.namelist = {      names: [{       name: 'foo',       type: [         { typename: 'ready' },         { typename: 'steady' }       ]      },{       name: 'bar',       type: [         { typename: 'start' },         { typename: 'stop' }       ]     }]      };    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="someapp">    <div ng-controller="somecontroller">      <div ng-repeat="item in namelist.names">        <label>          <input type="radio" name="name" ng-model="name.selected"          ng-value="item" />{{item.name}}        </label>      </div>        <label ng-repeat="type in name.selected.type">           <input          type="radio" name="type" ng-model="$parent.selectedtype"          ng-value="type"  />{{type.typename}}        </label>    </div>  </div>