<!DOCTYPE html>
<html ng-app="myApp">

  <head lang="en">
    <meta charset="utf-8" />
    <title>Custom Plunker</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.14.0/angular-ui-tree.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tree/2.14.0/angular-ui-tree.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/html" src="folderTree.html"></script>

  </head>

  <body ng-controller="MyCtrl">
    
    <folder-tree folders="folders"></folder-tree>
  </body>

</html>
var app = angular.module('myApp', ['ui.tree']);

app.directive('folderTree', function() {
  return {
    restrict: 'E',
                    scope: {
                    folders: '=',
                    selected: '='
                },
    templateUrl: 'folderTree.html',
    controller: ['$scope', function($scope) {
                    $scope.selectedFolder = {};
                    $scope.selectFolder = function(folder) {
                        $scope.selectedFolder.backgroundColor = 'inherit';
                        folder.backgroundColor = '#ddd';
                        $scope.selectedFolder = folder;
                    };
                    
                    $scope.getStyle = function(folder) {
                      if(folder.isSelected) {
                        return '{background-color: #ddd !important;}';
                      }
                    }
                }]
  }
});

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.folders = [{
            'id': 1,
            'title': 'folder1',
            'folders': [
                {
                    'id': 11,
                    'title': 'folder1.1',
                    'folders': [
                        {
                            'id': 111,
                            'title': 'folder1.1.1',
                            'folders': []
                        }
                    ]
                },
                {
                    'id': 12,
                    'title': 'folder1.2',
                    'folders': []
                }
            ]
        }, {
            'id': 2,
            'title': 'folder2',
            'folders': [
                {
                    'id': 21,
                    'title': 'folder2.1',
                    'folders': []
                },
                {
                    'id': 22,
                    'title': 'folder2.2',
                    'folders': []
                }
            ]
        }, {
            'id': 3,
            'title': 'folder3',
            'folders': [
                {
                    'id': 31,
                    'title': 'folder3.1',
                    'folders': []
                }
            ]
        }];
}]);
<script type="text/ng-template" id="nodes_renderer.html">
    <div ng-style="{'background-color': folder.backgroundColor}" ui-tree-handle class="tree-node tree-node-content">
        <a ng-if="folder.folders && folder.folders.length > 0" class="btn btn-xs" data-nodrag ng-click="toggle(this)">
        <span
        class="glyphicon"
        ng-class="{
          'glyphicon-folder-close': collapsed,
          'glyphicon-folder-open': !collapsed
        }"></span>
        </a>
        
        <span ng-click="selectFolder(folder)">{{folder.title}}</span>
        
  </div>
    <ol ui-tree-nodes="" ng-model="folder.folders" ng-class="{hidden: collapsed}">
        <li ng-repeat="folder in folder.folders" collapsed="true;" data-collapsed="true" ui-tree-node ng-include="'nodes_renderer.html'">
        </li>
    </ol>
</script>

<div ui-tree data-drag-enabled="false" id="tree-root">
    <ol ui-tree-nodes ng-model="folders">
        <li ng-repeat="folder in folders" ui-tree-node collapsed="true;" data-collapsed="true" ng-include="'nodes_renderer.html'">{{folder.title}}</li>
    </ol>
</div>