javascript - How to reduce HTML header display of Firebase Data from AngularJS Call? -

i have firebase database contains courses have courseids, sections, etc. each entry course can have 1 or more sections. there can duplicate courses of same courseid different sections (shown below).

basically, want reduce redundancy when displaying in html combining courses not repeat headers (courseid).

currently:

what want:

html

<div class="panel panel-default" ng-repeat="course in courses | orderby:'+courseid'">     ...         <h3 class="panel-title">{{course.courseid}}</h3>     ...     <table class="table table-condensed table-striped sections-table">       <tr>         <th>section</th>         <th>instructor</th>         <th>start</th>         <th>end</th>         <th>days</th>         <th>grad tas</th>         <th>undergrad tas</th>         <th>undergrad las</th>         <th>candidates</th>       </tr>       <tr ng-repeat="section in course.sections">         <td>{{section.sectionid}}</td>         <td>{{section.instructor}}</td>         <td>{{section.starttime}}</td>         <td>{{section.endtime}}</td>         <td>{{prettifydays(section.days)}}</td>         <td>{{section.gradtasneeded}}</td>         <td>{{section.undergradtasneeded}}</td>         <td>{{section.undergradlasneeded}}</td>         <td ng-init="sec = section">      ... 

angular

... $scope.courses = []; ... firebaseservice.getcourses(function(courses) {     $scope.courses = courses;     console.log(courses);     $scope.$apply();   }, function(error) {     console.log(error);   }); 

i cannot link actual running site contains confidential student data if there's else needed please let me know.