AngularJS File Tree

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js'></script>
<div ng-app=gyroEditor ng-controller=Ctrl>
    <script type="text/ng-template" id="treenode.html">
        <li>
            <a ng-click="collapsed=!collapsed"><i class="fa fa-{{node.type + ((collapsed || !node.children) ? '' : '-open')}}"></i> {{node.name}}</a>
            <ol ng-if="!collapsed && node.children && node.children.length">
                <recursive>
                    <treenode ng-repeat="c in node.children" node=c>
                    </treenode>
                </recursive>
            </ol>
        </li>
    </script>
    
    <script type="text/ng-template" id="tree.html">
        <ol>
            <treenode ng-repeat="n in nodes" node=n></treenode>
        </ol>
    </script>
    
    
    <div class=header>
        header
    </div>
    
    <div class=panel-left>
        <tree nodes=nodes></tree>
    </div>
    
    <div class=panel-editors>
        {{foob}}
    </div>
</div>

CSS

div {
    background-color: rgb(207, 209, 207);
}

.header {
    margin-bottom: 20px;
}
.panel-left {
    float: left;
    width: 200px;
    margin: 0 20px 20px 0;
}

.panel-editors {
    float: right;
    height: 100%;
    width: 100%;
}

JavaScript

var gyroEditor = angular.module('gyroEditor', []);

gyroEditor.controller('Ctrl', function($scope) {
    $scope.nodes = [
        {
            type: 'folder',
            name: 'static',
            children: [
                {
                    name: 'favicon.ico',
                    type: 'file',
                },
                {
                    name: 'main.css',
                    type: 'file',
                },
            ],
        },
        {
            type: 'folder',
            name: 'templates',
            children: [
                {
                    name: 'favicon.ico',
                    type: 'file',
                },
                {
                    name: 'main.css',
                    type: 'file',
                },
            ],
        },
        {
            name: 'main.py',
            type: 'file',
        },
    ];
});

gyroEditor.directive('tree', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {nodes: '=nodes'},
        templateUrl: 'tree.html',
        controller: function($scope) {
            console.log('tree ctrl');
        }
    };
});
gyroEditor.directive('treenode', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {node:'=node'},
        templateUrl: 'treenode.html',
        controller: function($scope) {
            console.log('node ctrl');
        }
    };
});
gyroEditor.directive("recursive", function($compile) {
    return {
        restrict: "EACM",
        priority: 100000,
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                iElement.append(
                    compiledContents(scope, 
                                     function(clone) {
           ...