jstree Example - Simple

HTML

<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<div ng-controller="TestCtrl" ng-app="jsTreeApp">
    <jstree data="treeData"></jstree>
</div>

JavaScript

'use strict';

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

app.controller('TestCtrl', ['$scope', function ($scope, Data) {
    $scope.treeData = {
        "data": [{
            "text": "Basics",
                "state": "open",
                "children": [{
                "text": "login",
                    "state": "closed",
                    "children": [
                    "login", {
                    "text": "results",
                        "state": "open"
                }]
            }, {
                "text": "Basics",
                    "state": "closed",
                    "children": [
                    "login",
                    "something", {
                    "text": "results",
                        "state": "closed"
                }]
            }]
        }, {
            "text": "All",
                "state": "closed",
                "children": [{
                "text": "AddCustomer",
                    "state": "closed",
                    "children": ["login", "Add", {
                    "text": "results",
                        "state": "closed"
                }]
            }]
        }]
    };
}]);

app.directive('jstree', function () {
    return {
        scope: {
            data: "="
        },
        restrict: 'E',
        //replace: true, ///replaces the element in the markup instead of appending to it.
        controller: function ($scope, $element, $attrs, $rootScope) {
				console.log($element);
        },
        template: '<div id="filter">Filter did not load.</div>',
        link: function (scope, element, attrs) {
            console.log(scope.data);
						/* log.info(scope.data) */
            //scope.$watch('data', function () {
            console.log(element,attrs);
            element.jstree({
                
                'core': scope.data
            }).bind('select_node.jstree', function () {
                alert('hi!');
            })
            //}, true);

        }
    };
})