{% raw %}
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div ng-repeat="panel in $ctrl.collection" class="panel panel-default">
        <div role="button" data-toggle="collapse" data-parent="#accordion" ng-click="$ctrl.collapseControl($index)" aria-expanded="true" aria-controls="collapse{{$index}}" class="panel-heading panel-heading-collapse collapsed" role="tab" id="heading{{$index}}">
            <h4 class="panel-title" style="text-align: center">
                {{panel.title}}
            </h4>
        </div>
        <div id="collapse{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$index}}">
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <th ng-repeat="head in panel.header">
                            {{head}}
                        </th>
                    </thead>
                    <tbody>
                        <tr ng-repeat="body in panel.body" style="color: {{body.rowStyle}}">
                            <td ng-repeat="column in body.columns">
                                <span class="{{column.style}}">{{column.value}}</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot ng-if="panel.footer != undefined">
                        <tr ng-repeat="foot in panel.footer">
                            <td colspan="1" style="text-align: right">
                                {{foot.title}}
                            </td>
                            <td>
                                {{foot.value | number:2}}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div> 
        </div>
    </div>
</div>
{% endraw %}