How to iterate a json object in angular js?

Question

I have a json object and I need to repeat this object in angular. I will tell you my problem. I have one button. By clicking this button, the user can select several items. I take an example ('a', 'b', 'c' ... and so on). When the user selects 'a' and closes the popup, I need to show this result.

Expected Result when 'a' is selected

A // header 
A S //names
A p

When the user selects 'A' their search from showTableData strong> and shows the names below the header:

"A": [
  { "name":"A S"},
  { "name":"A p"}
  ],

When the user selects "A" and "B", then the expected result:

A                        B // headers

A S                      B BS
A P                      B Bp 

etc.

, "A".'B ',' C '.. . , .

: 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>

json, . showTabledata​​strong > , ?

  $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"}
      ]
    };

Answer 1

, div showTableData​​strong > , .

<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>

a > .

, , , .

---

. ng-show 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>

.