I'm creating a list of tables with collapsible tbodys. This code works fine but I want to have the first tbody open on default. I've tried ng-init="showReports0" on the table tag, but this doesn't work. I've also tried to predefine $scope.showReports0 = true; in the controller. Can anyone help me out here?
<table ng-repeat="set in reportsData" class="table table-striped hover-table report-list" id="reportList-{{$index}}" ng-init="showReports0">
<thead>
<tr>
<th colspan="3" class="trigger-man" ng-model="showReports[$index]" ng-click="showReports[$index] = !showReports[$index]" style="width: 100%;">{{set.type}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': showReports[$index], 'glyphicon-chevron-right': !showReports[$index]}"></span></th>
</tr>
</thead>
<tbody ng-hide="!showReports[$index]">
<!-- Start Dynamic Reports Content -->
<tr class="hover-check" ng-class="{'compare-row disabled': item.type=='Comparative' && selectionData.length == 1, 'rep-checked': item.checked}" ng-repeat="item in set.reports | orderBy : 'sequence'">
<td class="no-pad"><div href="" class="popup pop-details no-match" uib-popover-template="nomatchPopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
<label class="checkbox checky">
<input type="checkbox" ng-change="reportPush(item.checked, item)" ng-true-value="true" ng-false-value="false" ng-model="item.checked" class="hidden">
</label></td>
<td class="rep-list-td"><div href="" class="popup pop-details no-compare" uib-popover-template="comparePopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
{{item.name}}</td>
<td class="cell-details"><a href="" class="rep-deets" ng-click="openRepDeets(item)">Details</a></td>
</tr>
</tbody>
</table>