JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body ng-app="myApp">
    <div ng-controller="myAppController">

<script type="text/ng-template"  id="tree_item.html">
    <td>{{data.name}}
        <table style="margin-left: 20px">
            <tr ng-repeat="data in data.nodes" ng-include="'tree_item.html'"></tr>
        </table>
    </td>
</script>

<table class="table table-striped">
     <thead>
        <tr>
            <th style="width:30px;">Test</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:100%" ng-repeat="data in treeData" ng-include="'tree_item.html'"></tr>
    </tbody>
</table>
</div>

CSS

#nested-table {
    margin-bottom: 0px;
}
#expanded-data {
    margin-left: 20px;
}

JavaScript

angular.module('myApp', []);

function myAppController($scope) {
    $scope.treeData = [{
        "name": "Root",
            "nodes": [{
            "name": "Level 1",
                "nodes": [{
                "name": "Level 2",
                    "nodes": [{
                    "name": "Level 3A"
                },{
                    "name": "Level 3B"
                }]
            }]
        }]
    }];
}