ngTreant - Simple Angular JS wrapper for Treant.js

app.js

var app = angular.module("app", ["ngTreant"]);

angular.module('ngTreant', [])
.directive('treantGraph', function () {
    return {
        restrict: 'E',
        scope: {
            data: '=data'
        },
        template: '<div class="chart" id="example-graph"></div>',
        link: linkFn
    };

    function linkFn(scope, element, attrs, ctrlFn) {
        var tree = new Treant(scope.data);
    }
});

con.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }


body { background: #fff; font-family: "Droid Serif",Georgia,"Times New Roman",Times,serif; color: #444444; }

/* optional Container STYLES */
.chart { height: 600px; width: 750px; margin: 5px; margin: 15px auto; border: 3px solid #DDD; border-radius: 3px; }

.node { font-size: 11px; }

.node.big-commpany { 
	cursor: pointer;
	padding: 0 2px;
	min-width: 60px;
	text-align: center;
	height: 30px;
	border: 2px solid #E8E8E3; 
	border-radius: 2px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.5);
	background: #fff; 
}
.node.big-commpany:active { 
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.1); 
	margin: 1px 0 0 1px; 
	border: 2px solid #D3D3CB;
}

.node.big-commpany .node-name {
	line-height: 30px;
	color: #9B9B9B;
}

.node.big-commpany:hover .node-name {
	color: #8B8B8B;
	text-shadow: 1px 1px rgba(0,0,0,.15);
}

controller.js

app.controller("CustomController", function ($scope) {
	var ctrl = {};

	$scope.nodeSelectedLast = "(NONE)";

	ctrl.selectEvent = function (nodeId, node, event) {
		$scope.nodeSelectedLast = nodeId;
		$scope.$apply();
	}

	$scope.graph = {
		chart: {
			container: "#example-graph",
			levelSeparation: 45,

			rootOrientation: "WEST",

			nodeAlign: "BOTTOM",

			connectors: {
				type: "step",
				style: {
					"stroke-width": 2
				}
			},
			node: {
				HTMLclass: "big-commpany"
			},
			callback: {
        // This refers to custom callback available in https://github.com/Alexlambertz/treant-js
				onClick: function (nodeId, node, event) {
					ctrl.selectEvent(nodeId, node, event);
				}.bind(this),
				onTreeLoaded: function () {
					console.log("Graph loaded!!");
				}
			}
		},

		nodeStructure: {
			unique_name: "node1",
			text: {
				name: "CEO"
			},
			connectors: {
				style: {
					'stroke': '#bbb',
					'arrow-end': 'oval-wide-long'
				}
			},
			innerHTML: "<a ng-click=\"gotClick('test')\">LALILU</a>",
			//link: {
			//    href: "http://www.google.com"
			//},
			children: [{
				text: {
					name: "Account"
				},
				stackChildren: true,
				collapsable: true,
				collapsed: true,
				connectors: {
					style: {
						'stroke': '#8080FF',
						'arrow-end': 'block-wide-long'
					}
				},
				children: [{
					text: {
						name: "Receptionist"
					},
					HTMLclass: "reception"
				}, {
					text: {
						name: "Author"
					}
				}]
			}, {
				text: {
					name: "Operation Manager"
				},
				connectors: {
					style: {
						'stroke': '#bbb',
						"stroke-dasharray": "- .", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
						'arrow-start': 'classic-wide-long'
					}
				},
				children: [{
					text: {
						name: "Manager I"
					},
					connectors: {
						style: {
							stroke: "#00CE67"
						}
					},
					children: [{
						text: {
							name: "Worker I"
						}
					}, {
						pseudo: true,
						connectors: {
							style: {
								stroke: "#00CE67"
							}
						},
						children: [{
							text: {
								name: "Worker II"
							}
						}]
					}, {
						text: {
							name: "Worker III"
						}
					}, {
						text: {
							name: "Worker IV"
						}
					}]
				}, {
					text: {
						name: "Manager II"
					},
					connectors: {
						type: "curve",
						style: {
							stroke: "#50688D"
						}
					},
					children: [{
						text: {
							name: "Worker I"
						}
					}, {
						text: {
							name: "Worker II"
						}
					}]
				}, {
					text: {
						name: "Manager III"
					},
					connectors: {
						style: {
							'stroke': '#FF5555'
						}
					},
					children: [{
						text: {
							name: "Worker I"
						}
					}, {
						pseudo: true,
						connectors: {
							style: {
								'stroke': '#FF5555'
							}
						},
						children: [{
							text: {
								name: "Worker II"
							}
						}, {
							text: {
								name: "Worker III"
							}
						}]
					}, {
						text: {
							name: "Worker IV"
						}
					}]
				}]
			}, {
				text: {
					name: "Delivery Manager"
				},
				stackChildren: true,
				connectors: {
					stackIndent: 30,
					style: {
						'stroke': '#E3C61A',
						'arrow-end': 'block-wide-long'
					}
				},
				children: [{
					text: {
						name: "Driver I"
					}
				}, {
					text: {
						name: "Driver II"
					}
				}, {
					text: {
						name: "Driver III"
					}
				}]
			}]
		}
	};

	$scope.gotClick = function (temp) {
		console.log("aa *****");
		console.log("temp = " + temp);
	}

});

index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="treant-js/Treant.css">
    <link rel="stylesheet" href="con.css">
</head>

<body ng-app="app">

    <div ng-controller="CustomController">
      <treant-graph data="graph"> </treant-graph>
      {{nodeSelectedLast}}
    </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="controller.js"></script>
    
    <!-- I could not find the bower files -->
    <script src="raphael/raphael.js"></script>
    <script src="treant-js/Treant.js"></script>
</body>

</html>

Hello @Alexlambertz !
I am wondering if this would support the user modifying the tree: adding more nodes, customizing existing ones, etc.
Thanks in advance!