diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
index e7189cf780..708919f569 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
@@ -10,14 +10,17 @@ angular.module("umbraco.directives")
         section: '@',
         showoptions: '@',
         showheader: '@',
-        cachekey: '@'
+        cachekey: '@',
+        callback: '='
       },
 
       compile: function (element, attrs) {
          //config
          var hideheader = (attrs.showheader === 'false') ? true : false;
          var hideoptions = (attrs.showoptions === 'false') ? "hide-options" : "";
+        
          
+
          var template = '<ul class="umb-tree ' + hideoptions + '">' + 
          '<li class="root">';
 
@@ -27,7 +30,7 @@ angular.module("umbraco.directives")
            '</div>';
          }
          template += '<ul>' +
-                  '<umb-tree-item ng-repeat="child in tree.children" node="child" section="{{section}}"></umb-tree-item>' +
+                  '<umb-tree-item ng-repeat="child in tree.children" node="child" callback="callback" section="{{section}}"></umb-tree-item>' +
                   '</ul>' +
                 '</li>' +
                '</ul>';
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
index 6326b43674..01365245ac 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
@@ -7,6 +7,7 @@ angular.module("umbraco.directives")
     scope: {
       section: '@',
       cachekey: '@',
+      callback: '=',
       node:'='
     },
 
@@ -21,9 +22,16 @@ angular.module("umbraco.directives")
         '</li>',
 
     link: function (scope, element, attrs) {
-      
+        
+        function emitEvent(eventName, args){
+
+          if(scope.callback){
+            $(scope.callback).trigger(eventName,args);
+          }
+        }
+
         scope.options = function(e, n, ev){ 
-          scope.$emit("treeOptionsClick", {element: e, node: n, event: ev});
+          emitEvent("treeOptionsClick", {element: e, node: n, event: ev});
         };
 
         /**
@@ -38,32 +46,39 @@ angular.module("umbraco.directives")
          * @param n {object} The tree node object associated with the click
          */
         scope.select = function(e,n,ev){
-            scope.$emit("treeNodeSelect", { element: e, node: n, event: ev });
+            emitEvent("treeNodeSelect", { element: e, node: n, event: ev });
         };
 
         scope.load = function (arrow, node) {
 
           if (node.expanded){
+            emitEvent("treeNodeCollapsing", { element: arrow, node: node});
+
             node.expanded = false;
             node.children = [];
-            
           }else {
             
+            emitEvent("treeNodeExpanding", { element: arrow, node: node});
+
             node.loading = true;
 
             treeService.getChildren( { node: node, section: scope.section } )
                 .then(function (data) {
+
+                    emitEvent("treeNodeLoaded", { element: arrow, node: node, children: data});
+
                     node.loading = false;
-                   // $(arrow).parent().remove(loader);
-                    
                     node.children = data;
                     node.expanded = true;
+
+                    emitEvent("treeNodeExpanded", { element: arrow, node: node, children: data});
+
                 }, function (reason) {
-                  //  $(arrow).parent().remove(loader);
+
+                    emitEvent("treeNodeLoadError", { element: arrow, node: node, error: reason});
+
                     node.loading = false;
                     notificationsService.error(reason);
-                    
-                    //alert(reason);
                     return;
                 });
             }   
@@ -73,7 +88,7 @@ angular.module("umbraco.directives")
           return { 'padding-left': (node.level * 20) + "px" };
         };
 
-        var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" node="child" section="{{section}}"></umb-tree-item></ul>';
+        var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}"></umb-tree-item></ul>';
         var newElement = angular.element(template);
         $compile(newElement)(scope);
         element.append(newElement);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js
index 9cba113871..19582a99f5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js
@@ -1,8 +1,9 @@
 //used for the media picker dialog
-angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController", 
+angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
 	function ($scope) {	
-	
-	$scope.$on("treeNodeSelect", function(event, args){
+	$scope.treeCallback = $({});
+
+	$scope.treeCallback.bind("treeNodeSelect", function(event, args){
 		args.event.preventDefault();
 		args.event.stopPropagation();
 			
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html
index bdabdf6fb3..0425f7f14d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html
@@ -13,7 +13,8 @@
 					section="content" 
 					cachekey="pickerDialog" 
 					showheader="false" 
-					showoptions="false">
+					showoptions="false"
+					callback="treeCallback">
 				</umb-tree>
 		</div>
 	</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
index 57cb562a5b..3021d61519 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
@@ -20,9 +20,12 @@ function NavigationController($scope, $location, navigationService, historyServi
     $scope.hideDialog = navigationService.hideDialog;
     $scope.hideNavigation = navigationService.hideNavigation;
     $scope.ui = navigationService.ui;
+    //tree event handler everyone can subscribe to
+    $scope.ui.tree = $({});
 
     $scope.selectedId = navigationService.currentId;
     $scope.sections = navigationService.sections;
+    
 
     sectionResource.getSections()
         .then(function(result) {
@@ -32,19 +35,17 @@ function NavigationController($scope, $location, navigationService, historyServi
             alert(reason);
         });
 
-    //events
     
     //this reacts to the options item in the tree
-    $scope.$on("treeOptionsClick", function (ev, args) {
+    $scope.ui.tree.bind("treeOptionsClick", function (ev, args) {
         $scope.currentNode = args.node;
         args.scope = $scope;
         navigationService.showMenu(ev, args);
     });
 
-
     //this reacts to tree items themselves being clicked
     //the tree directive should not contain any handling, simply just bubble events
-    $scope.$on("treeNodeSelect", function (ev, args) {
+    $scope.ui.tree.bind("treeNodeSelect", function(ev, args){
 
         var n = args.node;
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
index f6bdec4787..11910cfbfa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
@@ -65,7 +65,7 @@
 
         <!-- the tree -->
         <div id="tree" class="span5 umb-scrollable umb-panel" auto-scale="0" ng-animate="'slide'">
-            <umb-tree section="{{ui.currentTree}}" ></umb-tree>
+            <umb-tree callback="ui.tree" section="{{ui.currentTree}}" ></umb-tree>
         </div>        
 
         <!-- The context menu -->