AngularJS Recursion in html table - angularjs

Question

ok i have this code:
<table class="table">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
<th>
Period
</th>
</tr>
</thead>
<tbody data-ng-repeat="expense in expenses">
<tr class="danger">
<td>
<button data-ng-if="expense.Children.length > 0 && expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = false">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button data-ng-if="expense.Children.length > 0 && !expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = true">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
{{ expense.Description }}
</td>
<td>
{{ expense.Amount }}
</td>
<td>
{{ expense.Period }}
</td>
</tr>
<tr class="active" ng-show="expense.ShowChildren" data-ng-repeat="child in expense.Children">
<td>
    {{ child.Description }}
</td>
<td>
    {{ child.Amount }}
</td>
<td>
    {{ child.Period }}
</td>
</tr>
</tbody>
</table>
now i want to expense can have a child like u see in the photo
and this is work but when the child have child how I display that ?
i want to do the plus/minus button

Answer 1

I have been using a table from swimlane with much success lately. This is a feature that they support. This table is available here.
http://swimlane.github.io/angular-data-table/
You can do it, but you basically have to use expressions that insert the buttons where appropriate and ng-show/css to hide and display the rows when the buttons are clicked and a lot of other manual work.

Answer 2

I found a easy way to do it
Tree View: http://jsfiddle.net/brendanowen/uXbn6/8/
its better then other ways and more simple