Angularjs controller call looping

Question

I have a controller which is as following

var app = angular.module('StudentProgram', []);

        app.controller('mycontroller', function($scope){
            $scope.details=[
                {name1:"TIER 1 - CORE FOUNDATIONS", subcategory1:[
                    {name2:"Critical Reading and Writing", subcategory2:[
                        {course:"HIST 1301",term:"Spring 2012",credit:"3.0",grade:"B"},
                        {course:"ENGL 1301",term:"Spring 2012",credit:"3.0",grade:"A"}
                    ]},
                    {name2:"Speaking and Listening", subcategory2:[
                        {course:"HIST 1301",term:"Spring 2012",credit:"3.0",grade:"B"},
                        {course:"ENGL 1301",term:"Spring 2012",credit:"3.0",grade:"A"}
                    ]}
                ]},
                {name1:"TIER 2 - CORE DOMAINS", subcategory1:[
                    {name2:"Critical Reading and Writing", subcategory2:[
                        {course:"HIST 1301",term:"Spring 2012",credit:"3.0",grade:"B"},
                        {course:"ENGL 1301",term:"Spring 2012",credit:"3.0",grade:"A"}
                    ]}
                ]}
            ];
        });

I have defined a div to call the json above in loops using ng-repeat:

<div ng-controller="mycontroller" class="panel panel-primary">
                    <div ng-repeat="title in details">
                    <div class="panel-heading">
                        <h3 class="panel-title">{{title.name1}}</h3>
                    </div>
                    <div ng-repeat="subtitle in details" class="panel-body">
                        <div class="container">
                            <h4><strong>{{subtitle.name2}}</strong></h4>
                            <table class="table table-hover" style="width:700px;">
                                <tr>
                                  <th>Course</th>
                                  <th>Term</th>     
                                  <th>Credit</th>
                                  <th>Grade</th>

                                </tr>

                                <tr ng-repeat="detail in details">
                                  <td>{{detail.course}}</td>
                                  <td>{{detail.term}}</td>      
                                  <td>{{detail.credit}}</td>
                                  <td>{{detail.grade}}</td>

                                </tr>
                            </table>

                        </div>
                    </div>
                    </div>
                </div>

I would like to call the div using ng-repeat in such a way that it looks like the following:

Please help!

Answer 1

your ng-repeat usage was wrong on many part...

here is fixed HTML

<div ng-repeat="detail in details">
  <div class="panel-heading">
    <h3 class="panel-title">{{detail.name1}}</h3>
  </div>
  <div ng-repeat="subcategory in detail.subcategory1" class="panel-body">
    <div class="container">
      <h4>
        <strong>{{subcategory.name2}}</strong>
      </h4>
      <table class="table table-hover" style="width:700px;">
        <tbody>
          <tr>
            <th>Course</th>
            <th>Term</th>
            <th>Credit</th>
            <th>Grade</th>
          </tr>
          <tr ng-repeat="subcategory2 in subcategory.subcategory2">
            <td>{{subcategory2.course}}</td>
            <td>{{subcategory2.term}}</td>
            <td>{{subcategory2.credit}}</td>
            <td>{{subcategory2.grade}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

and here is working PLUNKER...