AngularJS - Jquery-TreeTable how to dynamically add columns in the tree-table when these columns' data based on an api

Question

My jquery-tree-table has some fixed columns and dynamic columns, these dynamic columns are based on the data returned from an api.

The api gives me an array[n], then it will show n colums.

But now I have problem even in show rows, it does not show as tree in tree-table.

Could you tell me where is the problem?

JS:

$scope.load = function(){
            var treeTableOptions = {
                expandable:true,
            };
            
            myService.selectDataOfTree({
                
            }).then(function (responses) {
               if(responses){
                   var data = responses;
                   $scope.data = data;
               }
               $("#example-basic").treetable(treeTableOptions);
            });
            
        }

$scope.data is something like:

[
  {
    assetId: 1, 
    assetparentID: 0, 
    name:"xx",
    address:"xx",
    info:[{},{}]
  },
  {
    assetId: 2, 
    assetparentID: 1,
    name:"xx",
    address:"xx", 
    info:[{},{}]
  }
]

my-customer.html:

 <table id="example-basic">
    <thead>
        <tr>
           <th>Column1</th>
           <th>Column2</th>
           <th>columns from info dynamically</th>
        </tr>
    </thead>
    <tbody>
        <tr data-tt-id="{{item.assetId}}" data-tt-parent-id="{{item.assetparentID}}" ng-repeat = "item in data">
            <td>
                    {{item.assetId}}
            </td>
            <td>
                    {{item.assetParentID}}
            </td>
            <td ng-repeat = "info in item.info">
            </td>
        </tr>
    </tbody>
</table>

Update:

I try to use directives:

angular.module('custom.plug.tree.table', [])
.directive('customPlugTreeTable', function () {
    return {
        restrict:'EA',
        scope:{
            initTreeTableOptionsFn :"&initTreeTableOptionsFn"
        },
       controller: function ($scope, $element, $q, wapPromptService) {
           this.treedata = $scope.initTreeTableOptionsFn();

        },
       templateUrl:'my-customer.html',
     
        link: function (scope, element, attrs, customObjectZtreeCtrl) {
            scope.data = customObjectZtreeCtrl.treedata;
        }
    };
});

html:

<custom-plug-tree-table init-tree-table-options-fn="initTreeTableOptionsTest()">
</custom-plug-tree-table>

controller:

$scope.initTreeTableOptionsTest = function(){
            var treeTableOptions = {
                expandable:true,
            };
           
            $("#example-basic").treetable(treeTableOptions);
            var testData = [
                {
                  assetId: 42581, 
                  assetparentID: 362, 
                  info:[{},{}]
                },
                {
                  assetId: 42581, 
                  assetparentID: 243,
                  info:[{},{}]
                },
                {
                  assetId: 362, 
                  assetparentID: 0,
                  info:[{},{}]
                },
                {
                  assetId: 243, 
                  assetparentID: 362,
                  info:[{},{}]
                },
          
              ];
             
              getChildren(testData,0);

              return $scope.data;
        }
 function getChildren(data, id) {
            for (var i in data) {
                if (data[i].assetparentID == id) {
                    $scope.data.push(data[i]);
                    getChildren(data,data[i].assetId)
                }
                
            }
        }

But it still has the same problem...