how to show sub rows as a nested table in angularj

问题:

I am trying to create a nested table in a table which is showing list of properties (each property can have some children as sub rows). The reason I am doing that is I want to have independent search and sort functionalitie for the children. html looks like this:

<div>
<table>
    <thead>
        <tr>
            <th></th>
            <th data-ng-click="sortData('name')">Name <div data-ng-class="getSortClass('name')"></div></th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat-start="property in filteredProps | filter:search | orderBy:sortColumn:reverseSort | startFrom:currentPage*pageSize | limitTo:pageSize track by property.id">
            <td>
                <span data-ng-show="{{property.numOfBuildings}}">
                    <image data-ng-click="getChildren(property,filteredProps.indexOf(property))" data-ng-src="carrotImage"></image>
                </span>
            </td>
            <td>
                {{property.name}}
            </td>
            <td>
                {{property.description}}
            </td>
        </tr>
        <tr data-ng-repeat-end data-ng-show="property.expanded">
            <table>
                <tbody>
                <tr data-ng-repeat="child in property.children | startFrom:property.childrenCurrentPage*property.childrenPageSize | limitTo:property.childrenPageSize track by child.id">
                    <td></td>
                    <td>
                        {{child.name}}
                    </td>
                    <td>
                        {{child.description}}
                    </td>
                </tr>
                </tbody>
                <div data-ng-show="property.childrenNumOfPages > 1">
                    <button data-ng-disabled="property.childrenCurrentPage == 0" data-ng-click="property.childrenCurrentPage=0">First</button>
                    <button data-ng-disabled="property.childrenCurrentPage == 0" data-ng-click="property.childrenCurrentPage=childrenCurrentPage-1">Previous</button>
                    Page {{property.childrenCurrentPage+1}} of {{property.childrenNumOfPages}}
                    <button data-ng-disabled="property.childrenCurrentPage >= property.children.length/property.childrenPageSize - 1" data-ng-click="property.childrenCurrentPage=property.childrenCurrentPage+1">Next</button>
                    <button data-ng-disabled="property.childrenCurrentPage >= property.children.length/property.childrenPageSize - 1" data-ng-click="property.childrenCurrentPage=property.childrenNumOfPages-1">Last</button>
                </div>
            </table>
        </tr>
    </tbody>
</table>
<div class="centered" data-ng-show="numberOfPages > 1">
    <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=0">First</button>
    <button data-ng-disabled="currentPage == 0" data-ng-click="currentPage=currentPage-1">Previous</button>
    Page {{currentPage+1}} of {{numberOfPages}}
    <button data-ng-disabled="currentPage >= filteredProps.length/pageSize - 1" data-ng-click="currentPage=currentPage+1">Next</button>
    <button data-ng-disabled="currentPage >= filteredProps.length/pageSize - 1" data-ng-click="currentPage=numberOfPages-1">Last</button>
</div>

js file looks like this (children properties will be loaded on demand - when user clicks on the carrotImage for a row)

$scope.getChildren = function(property, index){
        property.expanded = !property.expanded;
        if($scope.filteredProps[index].children){
            return;
        }
        var parentProId = property.id;
        $http({
            method: 'GET',
            url: /children/ + parentProId
        })
            .then(function (response) {
                var children = response.data;
                $scope.filteredProps[index].children = children;
                $scope.filteredProps[index].childrenCurrentPage = 0;
                $scope.filteredProps[index].childrenPageSize = 2;
                $scope.filteredProps[index].childrenNumOfPages = Math.ceil($scope.filteredProps[index].children.length/$scope.filteredProps[index].childrenPageSize);

            });
    };

The pagination working fine for parent properties and the pagination bar shows up at the end of the table. but it doesn't show the nested table for the children properties. I would appreciate for any help.