Multiple (Two) ng-repeats on DataTable in AngularJS - angularjs

Question

Now I know this is a very common topic but I'm not getting any solutions from the SO questions that I saw till now. I'm currently working on a page that has a DataTable whose data is coming from the controller and by using ng-repeat. However, the case here is that I have to use two ng-repeats on the table.
The JSON is as below:
{
"mainData": [
{
"goal": "ValueOne",
"array": [
{
"LowerKeyOne": "LowerValueOne",
"LowerKeyTwo": "LowerValueOne",
"LowerKeyThree": "LowerValueOne"
},
{
"LowerKeyOne": "LowerValueTwo",
"LowerKeyTwo": "LowerValueTwo",
"LowerKeyThree": "LowerValueTwo"
}
]
},
{
"goal": "ValueTwo",
"array": [
{
"LowerKeyOne": "LowerValueThree",
"LowerKeyTwo": "LowerValueThree",
"LowerKeyThree": "LowerValueThree"
},
{
"LowerKeyOne": "LowerValueFour",
"LowerKeyTwo": "LowerValueFour",
"LowerKeyThree": "LowerValueFour"
}
]
}
]
}
The HTML is as below:
<div class="ibox-content table-responsive">
<div ng-repeat="data in mainData">
<div ng-repeat="cond in data.array">
<table datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr class="table-tr-th">
<th>Header</th>
<th>Other Header</th>
<th>Another Header</th>
<th>Extra Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{data.goal}}</td>
<td>{{cond.LowerKeyOne}}</td>
<td>{{cond.LowerKeyTwo}}</td>
<td>{{cond.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I've used many different options, like e.g -
Adding ng-repeat="(key, value) in JSONObject" ng-if="key=='mainData'" in <tbody>
Two ng-repeats, one in <tbody> and one in <tr> after <tbody>
Adding <div> tags before <table> and also tried adding before <tbody> (before <tbody> as it was suggested in one of the SO answers on the same topic)
The last option resulted me in the following error -
Error: Expected expression in form of "item in collection[ track
by id]" but got "{0}"
Also tried using limitTo:1 filter, but no resulted no success.
Any helpful comment is welcome. Thanks!

Answer 1

Do you need something like this?
JSFiddle demo
<table ng-repeat="data in data.mainData | limitTo: 1">
<thead>
<tr>
<th>Header</th>
<th>Other header</th>
<th>Another header</th>
<th>Extra header</th>
</tr>
</thead>
<tbody ng-repeat="data in data.mainData track by #index">
<tr ng-repeat="d in data.array">
<td>{{data.goal}}</td>
<td>{{d.LowerKeyOne}}</td>
<td>{{d.LowerKeyTwo}}</td>
<td>{{d.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
Including the specific part of your needs for your comment and answer.

Answer 2

#Mistalis's answer is almost correct, but in my case I had to make a few changes to get the solution and hence have posted this answer.
The solution is -
<table ng-repeat="data in data.mainData | limitTo: 1">
<thead>
<tr>
<th>Header</th>
<th>Other header</th>
<th>Another header</th>
<th>Extra header</th>
</tr>
</thead>
<tbody ng-repeat="data in data.mainData track by #index">
<tr ng-repeat="d in data.array">
<td>{{data.goal}}</td>
<td>{{d.LowerKeyOne}}</td>
<td>{{d.LowerKeyTwo}}</td>
<td>{{d.LowerKeyThree}}</td>
</tr>
</tbody>
</table>
Not yet sure as to why had to write ng-repeat="data in mainData" twice.