To display a single level, consider using an HTML table with two ng-repeats - one for tasks and another for child tasks. Additionally, you can include buttons to toggle the visibility of child tasks.
<table class="table table-hover">
<thead>
<tr>
<td><b>ID</b></td>
<td><b>Task</b></td>
<td></td>
</tr>
</thead>
<tbody ng-repeat="task in ListOfTasks" ng-init="task.showChildren = false">
<tr>
<td>
<span class="label label-success">{{$index+1}}</span>
<span>
<a class="label label-danger" ng-show="!post.showChildren" ng-click="task.showChildren = true">+</a>
<a class="label label-primary" ng-show="post.showChildren" ng-click="task.showChildren = false">-</a>
</span>
</td>
<td>
{{task.TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
<tr ng-show="task.showChildren">
<td>
<div class="row">
<div class="col-sm-offset-1">
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td><b>Child Task</b></td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="childTasks in task.CHILD_TASKS">
<td class="col-sm-1">
<span class="label label-success">{{ $index + 1 }}</span>
</td>
<td>
{{childTasks.CHILD_TASK_NAME}}
</td>
<td class="table-actions"></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Check out how the table would appear https://i.sstatic.net/uHI4b.jpg
If you prefer not to load all data initially, fetch children on expand click.