angularjs - how to iterate json object in angular js? -

i have json object , need iterate object in angular. tell problem. have 1 button. on click of button user can select multiple elements. take example ('a','b','c'...so on). when user select 'a' , close pop need show result.

expected result when 'a' selected

a // header  s //names p 

when user select 'a' search showtabledata , show names below header:

"a": [   { "name":"a s"},   { "name":"a p"}   ], 

when user select 'a' , 'b' expected result:

a                        b // headers  s                      b bs p                      b bp  

so on..

actually able print header if user select thing 'a' .'b','c'..so on. don't know how print corresponding names below header.

here code: http://codepen.io/anon/pen/zgnldr

     <div class="row">        <div ng-repeat="d in data">   <div class="col" ng-show="d.checked">{{d.name}}</div>        </div> </div> 

is there other way take json object show expected result .. can map different way data showtabledata expected result ?

  $scope.showtabledata={       "a": [       { "name":"a s"},       { "name":"a p"}       ],       "b": [       { "name":"b bs"},       { "name":"b bp"}       ],        "c": [       { "name":"c c"},       { "name":"c c"}       ],       "d": [       { "name":"d ds"},       { "name":"d dp"}       ],       "e":[       { "name":"e es"},       { "name":"e ep"}       ]     }; 

i think simplest solution adding div , iterate in on showtabledata variable, keys selected.

<div ng-repeat="d in data">   <div class="col" ng-show="d.checked">{{d.name}}</div>      <div class="col" ng-show="d.checked"         ng-repeat="nameobject in showtabledata[d.name]">              {{nameobject.name}}       </div> </div> 

example on codepen.

there things can refactored, hope, you'll idea.

---

there little bit cleaner solution using of filter. approach can remove ng-show inside ng-repeat.

<div ng-repeat="d in data | filter:{checked: true}">      <div class="col">{{d.name}}</div>      <div class="col" ng-repeat="nameobject in showtabledata[d.name]">          {{nameobject.name}}       </div> </div> 

example.