AngularJS : Expandable recursive tree table

You can consider using tree-grid.

demo: expandable grid

  <tree-gird tree-data="tree_data"></tree-grid>

Provide a tree structured data, column definition and a property where you want to expand.

Provide a tree structured data, column definition and a property where you want to expand in your controller.

 $scope.tree_data = [
   {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000, TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
            {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
     }
   ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

Optionally, you can define column definitions, properties on which you want to use expand and collapse

$scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];


$scope.expanding_property = "Name";

details: https://github.com/khan4019/tree-grid-directive

Add ng-if here

<div id="expanded-data" data-ng-if="childrenVisible">

and give your tree items a property which defines the visibility of their children. Set the property true or false (if you want false just dont add it by default) by default and implement a toggleChildren function which is called by a click on the toggleButton (the folder)

scope.toggleChildren = function () {
    scope.item.childrenVisible = !scope.item.childrenVisible;
}

EDIT:// Now changing the folder (opened or closed) http://jsfiddle.net/8f3rL/35/