how to iterate json object in angular js?

I have json object and I need to iterate that object in angular. I will tell you my problem. I have one button. On click of that button user can select multiple elements. I take example ('a','b','c'...so on). When user select 'a' and close the pop up I need to show this result.

Expected result when 'a' is selected

A // header 
A S //names
A p

When user select 'A' its search from showTableData and show the names below header:

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

When user select 'A' and 'B' then expected result:

A                        B // headers

A S                      B BS
A P                      B Bp 

so on..

Actually I am able to print header if user select any thing 'A' .'B','C'..so on. I don't know how to print it corresponding names below header.

Here is my 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 any other way to take json object to show the expected result .. can I map different way data with showTabledata so that i will get 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"}
      ]
    };