OscarGalindo/index.html

## index.html
<!doctype html>
<html ng-app="ctz">
<head>
    <title>CategoryTree</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
      angular.module('treeApp', []);
      angular.module('treeApp').controller('treeCtrl', treeCtrl);

      treeCtrl.$inject = ['$scope', '$http'];

      function treeCtrl($scope, $http) {
        $scope.count = function (data) {
          if (data.childs) {
            return '(' + Object.keys(data.childs).length + ')';
          } else return '';
        };
        $http.get('tree.json').success(function (data) {
          $scope.tree = data
        })
      }
    </script>
</head>
<body>
<script type="text/ng-template" id="tree.html">
    <span ng-click="child.open = !child.open">{{child.label}} {{count(child)}}</span>
    <ul ng-show="child.open">
        <li ng-repeat="child in child.childs" ng-include="'tree.html'"></li>
    </ul>
</script>
<ul ng-controller="treeCtrl">
    <li ng-repeat="child in tree" ng-include="'tree.html'"></li>
</ul>
</body>
</html>

## tree.json
{
  "0": {
    "label": "Label 0"
  },
  "1": {
    "label": "Label 1",
    "childs": {
      "0": {
        "label": "Label 1 - Child 0"
      },
      "1": {
        "label": "Label 1 - Child 1",
        "childs": {
          "0": {
            "label": "Label 1 - Child 1 - Child 0"
          }
        }
      }
    }
  },
  "2": {
    "label": "Label 2"
  }
}
	<!doctype html>
	<html ng-app="ctz">
	<head>
	<title>CategoryTree</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script>
	angular.module('treeApp', []);
	angular.module('treeApp').controller('treeCtrl', treeCtrl);

	treeCtrl.$inject = ['$scope', '$http'];

	function treeCtrl($scope, $http) {
	$scope.count = function (data) {
	if (data.childs) {
	return '(' + Object.keys(data.childs).length + ')';
	} else return '';
	};
	$http.get('tree.json').success(function (data) {
	$scope.tree = data
	})
	}
	</script>
	</head>
	<body>
	<script type="text/ng-template" id="tree.html">
	<span ng-click="child.open = !child.open">{{child.label}} {{count(child)}}</span>
	<ul ng-show="child.open">
	<li ng-repeat="child in child.childs" ng-include="'tree.html'"></li>
	</ul>
	</script>
	<ul ng-controller="treeCtrl">
	<li ng-repeat="child in tree" ng-include="'tree.html'"></li>
	</ul>
	</body>
	</html>
	{
	"0": {
	"label": "Label 0"
	},
	"1": {
	"label": "Label 1",
	"childs": {
	"0": {
	"label": "Label 1 - Child 0"
	},
	"1": {
	"label": "Label 1 - Child 1",
	"childs": {
	"0": {
	"label": "Label 1 - Child 1 - Child 0"
	}
	}
	}
	}
	},
	"2": {
	"label": "Label 2"
	}
	}