diff --git a/src/Umbraco.Web.UI.Client/docs/tutorials/CreatingAPropertyEditor.ngdoc b/src/Umbraco.Web.UI.Client/docs/tutorials/CreatingAPropertyEditor.ngdoc
index 01dee13075..1a5a414653 100644
--- a/src/Umbraco.Web.UI.Client/docs/tutorials/CreatingAPropertyEditor.ngdoc
+++ b/src/Umbraco.Web.UI.Client/docs/tutorials/CreatingAPropertyEditor.ngdoc
@@ -104,12 +104,12 @@ Then open the `markdowneditor.controller.js` file and edit it so it looks like t
 
 	angular.module("umbraco")
 	.controller("My.MarkdownEditorController",
-	//inject umbracos scriptLoader
-	function ($scope,scriptLoader) {
+	//inject umbracos assetsService
+	function ($scope,assetsService) {
 
-	    //tell the scriptloader to load the markdown.editor libs from the markdown editors
+	    //tell the assetsService to load the markdown.editor libs from the markdown editors
 	    //plugin folder
-	    scriptLoader
+	    assetsService
 			.load([
 				"/app_plugins/markdowneditor/lib/markdown.converter.js",
 	            "/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
@@ -121,7 +121,7 @@ Then open the `markdowneditor.controller.js` file and edit it so it looks like t
 			});
 
 	    //load the seperat css for the editor to avoid it blocking our js loading
-	    scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
+	    assetsService.loadCss("/app_plugins/markdowneditor/lib/markdown.css");
 	});
 
 This loads in our external dependency, but only when its needed by the editor.
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 88e57a8939..82b47c749c 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
@@ -15,7 +15,8 @@ angular.module("umbraco.directives")
         section: '@',
         showoptions: '@',
         showheader: '@',
-        cachekey: '@'
+        cachekey: '@',
+        eventhandler: '='
       },
 
       compile: function (element, attrs) {
@@ -33,7 +34,7 @@ angular.module("umbraco.directives")
            '</div>';
          }
          template += '<ul>' +
-                  '<umb-tree-item ng-repeat="child in tree.root.children" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
+                  '<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
                   '</ul>' +
                 '</li>' +
                '</ul>';
@@ -55,7 +56,11 @@ angular.module("umbraco.directives")
 
             /** Helper function to emit tree events */
             function emitEvent(eventName, args) {
-                $rootScope.$broadcast(eventName, args);
+
+              if (scope.eventhandler) {
+                $(scope.eventhandler).trigger(eventName, args);
+              }
+             //   $rootScope.$broadcast(eventName, args);
             }
 
             /** Method to load in the tree data */
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 fcd6777a94..82966ace97 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
@@ -26,7 +26,7 @@ angular.module("umbraco.directives")
     scope: {
       section: '@',
       cachekey: '@',
-      callback: '=',
+      eventhandler: '=',
       node:'='
     },
 
@@ -46,9 +46,12 @@ angular.module("umbraco.directives")
         var enableDeleteAnimations = true;
 
         /** Helper function to emit tree events */
-
         function emitEvent(eventName, args) {
-            $rootScope.$broadcast(eventName, args);
+
+          if(scope.eventhandler){
+            $(scope.eventhandler).trigger(eventName,args);
+          }
+          //$rootScope.$broadcast(eventName, args);
         }
 
         /**
@@ -127,7 +130,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" callback="callback" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
+        var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
         var newElement = angular.element(template);
         $compile(newElement)(scope);
         element.append(newElement);
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js b/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js
new file mode 100644
index 0000000000..fcefcdac0a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js
@@ -0,0 +1,171 @@
+/**
+ * @ngdoc service
+ * @name umbraco.services.assetsService
+ *
+ * @requires $q 
+ * @requires angularHelper
+ *  
+ * @description
+ * Promise-based utillity service to lazy-load client-side dependencies inside angular controllers.
+ * 
+ * ##usage
+ * To use, simply inject the assetsService into any controller that needs it, and make
+ * sure the umbraco.services module is accesible - which it should be by default.
+ *
+ * <pre>
+ *      angular.module("umbraco").controller("my.controller". function(assetsService){
+ *          assetsService.load(["script.js", "styles.css"], $scope).then(function(){
+ *                 //this code executes when the dependencies are done loading
+ *          });
+ *      });
+ * </pre> 
+ *
+ * You can also load individual files, which gives you greater control over what attibutes are passed to the file, as well as timeout
+ *
+ * <pre>
+ *      angular.module("umbraco").controller("my.controller". function(assetsService){
+ *          assetsService.loadJs("script.js", $scope, {charset: 'utf-8'}, 10000 }).then(function(){
+ *                 //this code executes when the script is done loading
+ *          });
+ *      });
+ * </pre>
+ *
+ * For these cases, there are 2 individual methods, one for javascript, and one for stylesheets:
+ *
+ * <pre>
+ *      angular.module("umbraco").controller("my.controller". function(assetsService){
+ *          assetsService.loadCss("stye.css", $scope, {media: 'print'}, 10000 }).then(function(){
+ *                 //loadcss cannot determine when the css is done loading, so this will trigger instantly
+ *          });
+ *      });
+ * </pre>  
+ */
+angular.module('umbraco.services')
+.factory('assetsService', function ($q, $log, angularHelper) {
+
+    return {
+        /**
+         * @ngdoc method
+         * @name umbraco.services.assetsService#loadCss
+         * @methodOf umbraco.services.assetsService
+         *
+         * @description
+         * Injects a file as a stylesheet into the document head
+         * 
+         * @param {String} path path to the css file to load
+         * @param {Scope} scope optional scope to pass into the loader
+         * @param {Object} keyvalue collection of attributes to pass to the stylesheet element  
+         * @param {Number} timeout in milliseconds
+         * @returns {Promise} Promise object which resolves when the file has loaded
+         */
+        loadCss : function(path, scope, attributes, timeout){
+            var deferred = $q.defer();
+            var t = timeout || 5000;
+            var a = attributes || undefined;
+
+            yepnope.injectCss(path, function () {
+
+             if (!scope) {
+                 deferred.resolve(true);
+             }else{
+                 angularHelper.safeApply(scope, function () {
+                     deferred.resolve(true);
+                 });
+             }
+
+            },a,t);
+
+            return deferred.promise;
+        },
+        
+        /**
+         * @ngdoc method
+         * @name umbraco.services.assetsService#loadJs
+         * @methodOf umbraco.services.assetsService
+         *
+         * @description
+         * Injects a file as a javascript into the document
+         * 
+         * @param {String} path path to the js file to load
+         * @param {Scope} scope optional scope to pass into the loader
+         * @param {Object} keyvalue collection of attributes to pass to the script element  
+         * @param {Number} timeout in milliseconds
+         * @returns {Promise} Promise object which resolves when the file has loaded
+         */
+        loadJs : function(path, scope, attributes, timeout){
+            var deferred = $q.defer();
+            var t = timeout || 5000;
+            var a = attributes || undefined;
+
+            yepnope.injectJs(path, function () {
+
+              if (!scope) {
+                  deferred.resolve(true);
+              }else{
+                  angularHelper.safeApply(scope, function () {
+                      deferred.resolve(true);
+                  });
+              }
+
+            },a,t);
+
+            return deferred.promise;
+        },
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.assetsService#load
+         * @methodOf umbraco.services.assetsService
+         *
+         * @description
+         * Injects a collection of files, this can be a mixed collection of css and js files, the loader will determine how to load them
+         * 
+         * **Warning:** if the collection of files contains a .css file, you will in some cases not receive a resolved promise, it is therefore prefered to use the individual loadCss and loadJs methods
+         *
+         * @param {Array} pathArray string array of paths to the files to load
+         * @param {Scope} scope optional scope to pass into the loader
+         * @returns {Promise} Promise object which resolves when all the files has loaded
+         */
+        load: function (pathArray, scope) {
+            var deferred = $q.defer();
+           
+            var nonEmpty = _.reject(pathArray, function(item) {
+                return item === undefined || item === "";
+            });
+
+            //don't load anything if there's nothing to load
+            if (nonEmpty.length > 0) {
+
+                yepnope({
+                    load: pathArray,
+                    complete: function() {
+
+                        //if a scope is supplied then we need to make a digest here because
+                        // deferred only executes in a digest. This might be required if we 
+                        // are doing a load script after an http request or some other async call.
+                        if (!scope) {
+                            deferred.resolve(true);
+                        }
+                        else {
+                            angularHelper.safeApply(scope, function () {
+                                deferred.resolve(true);
+                            });
+                        }
+                    }
+                });
+            }
+            else {
+                if (!scope) {
+                    deferred.resolve(true);
+                }
+                else {
+                    angularHelper.safeApply(scope, function () {
+                        deferred.resolve(true);
+                    });
+                }
+            }
+
+            return deferred.promise;
+        }
+    };
+});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
index 0569c15c00..e2bdd5c668 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js
@@ -8,13 +8,13 @@
  * @description
  * Used to lazy load in any JS dependencies that need to be manually loaded in
  */
-function legacyJsLoader(scriptLoader, umbRequestHelper) {
+function legacyJsLoader(assetsService, umbRequestHelper) {
     return {
         
         /** Called to load in the legacy tree js which is required on startup if a user is logged in or 
          after login, but cannot be called until they are authenticated which is why it needs to be lazy loaded. */
         loadLegacyTreeJs: function(scope) {
-            return scriptLoader.load([umbRequestHelper.getApiUrl("legacyTreeJs", "", "")], scope);
+            return assetsService.loadJs(umbRequestHelper.getApiUrl("legacyTreeJs", "", ""), scope);
         }  
     };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js b/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js
index 385f6e3bd5..445955fefc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/packages/MarkdownEditor/markdowneditor.controller.js
@@ -1,23 +1,23 @@
 angular.module("umbraco")
 .controller("My.MarkdownEditorController",
-//inject umbracos scriptLoader
-function ($scope,scriptLoader) {
+//inject umbracos assetsServce
+function ($scope,assetsService) {
 
-    //tell the scriptloader to load the markdown.editor libs from the markdown editors
+    //tell the assets service to load the markdown.editor libs from the markdown editors
     //plugin folder
-    scriptLoader
+    assetsService
 		.load([
 			"/app_plugins/markdowneditor/lib/markdown.converter.js",
             "/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
             "/app_plugins/markdowneditor/lib/markdown.editor.js"
         ])
 		.then(function () {
-		    //this function will execute when all dependencies have loaded
-		    var converter2 = new Markdown.Converter();
-		    var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
+            //this function will execute when all dependencies have loaded
+            var converter2 = new Markdown.Converter();
+            var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
             editor2.run();
 		});
 
     //load the seperat css for the editor to avoid it blocking our js loading TEMP HACK
-    scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
+    assetsService.loadCss("/app_plugins/markdowneditor/lib/markdown.css");
 });
\ No newline at end of file
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 522daaec8f..95f99b87d8 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,10 +1,9 @@
 //used for the media picker dialog
 angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
 	function ($scope) {	
-	$scope.treeCallback = $({});
+	$scope.dialogTreeEventHandler = $({});
 
-	//$scope.treeCallback.bind("treeNodeSelect", function(event, args){
-	$scope.$on("treeNodeSelect", function (ev, args) {
+	$scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, 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 0425f7f14d..cef3668740 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
@@ -11,10 +11,10 @@
 		<div class="tab-content umb-control-group">
 				<umb-tree 
 					section="content" 
-					cachekey="pickerDialog" 
+					cachekey="contentpickerDialog" 
 					showheader="false" 
 					showoptions="false"
-					callback="treeCallback">
+					eventhandler="dialogTreeEventHandler">
 				</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 6a0516e495..28a0f0b5d3 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
@@ -16,6 +16,9 @@ function NavigationController($scope,$rootScope, $location, $log, navigationServ
     //   when we create a dialog we pass in this scope to be used for the dialog's scope instead of creating a new one.
     $scope.nav = navigationService;
 
+    //the tree event handler i used to subscribe to the main tree click events
+    $scope.treeEventHandler = $({});
+
     $scope.selectedId = navigationService.currentId;
     $scope.sections = navigationService.sections;
     
@@ -31,18 +34,21 @@ function NavigationController($scope,$rootScope, $location, $log, navigationServ
             angularHelper.safeApply($scope);
         }
     });
-    
+        
     //this reacts to the options item in the tree
-    $scope.$on("treeOptionsClick", function (ev, args) {        
+    $scope.treeEventHandler.bind("treeOptionsClick", function (ev, args) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        
         $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.treeEventHandler.bind("treeNodeSelect", function (ev, args) {
         var n = args.node;
 
         //here we need to check for some legacy tree code
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 bd28cc3dda..01f36746b5 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="{{nav.ui.currentSection}}" ></umb-tree>
+            <umb-tree eventhandler="treeEventHandler" section="{{nav.ui.currentSection}}" ></umb-tree>
         </div>        
 
         <!-- The context menu -->
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
index f7021a955a..9757917895 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
@@ -1,9 +1,9 @@
 angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
-    function ($scope, notificationsService, scriptLoader) {
+    function ($scope, notificationsService, assetsService) {
     
-    scriptLoader.load([
-            'views/propertyeditors/datepicker/bootstrap.datepicker.js',
-        ]).then(
+    assetsService.loadJs(
+            'views/propertyeditors/datepicker/bootstrap.datepicker.js'
+        ).then(
         function () {
             //The Datepicker js and css files are available and all components are ready to use.
 
@@ -21,7 +21,7 @@ angular.module("umbraco").controller("Umbraco.Editors.DatepickerController",
         });
 
 
-    scriptLoader.load([
-            'css!/belle/views/propertyeditors/datepicker/bootstrap.datepicker.css'
-        ]);    
+    assetsService.loadCss(
+            'views/propertyeditors/datepicker/bootstrap.datepicker.css'
+        );    
 });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/googlemaps/googlemaps.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/googlemaps/googlemaps.controller.js
index ed6ab974f5..3ab8a8f434 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/googlemaps/googlemaps.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/googlemaps/googlemaps.controller.js
@@ -1,8 +1,8 @@
 angular.module("umbraco")
 .controller("Umbraco.Editors.GoogleMapsController",
-    function ($rootScope, $scope, notificationsService, dialogService, scriptLoader, $log, $timeout) {
+    function ($rootScope, $scope, notificationsService, dialogService, assetsService, $log, $timeout) {
     
-    scriptLoader.load(['http://www.google.com/jsapi'])
+    assetsService.loadJs('http://www.google.com/jsapi')
         .then(function(){
             google.load("maps", "3",
                         {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
index 96fa452a2c..c84635f7ec 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
@@ -1,10 +1,10 @@
 angular.module("umbraco")
     .controller("Umbraco.Editors.RTEController",
-    function($rootScope, $scope, dialogService, $log, umbImageHelper, scriptLoader){
+    function($rootScope, $scope, dialogService, $log, umbImageHelper, assetsService){
 
-    scriptLoader.load(["lib/tinymce/tinymce.min.js"]).then(function(){
-        
+    assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){
         tinymce.DOM.events.domLoaded = true;
+
         tinymce.init({
             selector: "#" + $scope.model.alias + "_rte",
             skin: "umbraco",
@@ -55,7 +55,7 @@ angular.module("umbraco")
         };
 
         function populate(data){
-            $scope.model.value = data.selection;    
+            $scope.model.value = data.selection;   
         }
 
     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags/tags.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags/tags.controller.js
index bdcfc7f478..20c08c5d0b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags/tags.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/tags/tags.controller.js
@@ -1,13 +1,10 @@
 angular.module("umbraco")
 .controller("Umbraco.Editors.TagsController",
-	//function($rootScope, $scope, $log, tagsResource, scriptLoader) {	
-    function ($rootScope, $scope, $log, scriptLoader) {
+    function ($rootScope, $scope, $log, assetsService) {
 		
-		scriptLoader.load(
-			[
-			'views/propertyeditors/tags/bootstrap-tags.custom.js',
-			'css!views/propertyeditors/tags/bootstrap-tags.custom.css'
-			]).then(function(){
+		assetsService.loadJs(
+			'views/propertyeditors/tags/bootstrap-tags.custom.js'
+			).then(function(){
 
 			//// Get data from tagsFactory
 			//$scope.tags = tagsResource.getTags("group");
@@ -22,5 +19,7 @@ angular.module("umbraco")
 				tags.addTag(tag.label);
 			});
 		});
+
+		assetsService.loadCss('views/propertyeditors/tags/bootstrap-tags.custom.css');
 	}
 );
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/App_Plugins/MarkdownEditor/markdowneditor.controller.js b/src/Umbraco.Web.UI/App_Plugins/MarkdownEditor/markdowneditor.controller.js
index 385f6e3bd5..445955fefc 100644
--- a/src/Umbraco.Web.UI/App_Plugins/MarkdownEditor/markdowneditor.controller.js
+++ b/src/Umbraco.Web.UI/App_Plugins/MarkdownEditor/markdowneditor.controller.js
@@ -1,23 +1,23 @@
 angular.module("umbraco")
 .controller("My.MarkdownEditorController",
-//inject umbracos scriptLoader
-function ($scope,scriptLoader) {
+//inject umbracos assetsServce
+function ($scope,assetsService) {
 
-    //tell the scriptloader to load the markdown.editor libs from the markdown editors
+    //tell the assets service to load the markdown.editor libs from the markdown editors
     //plugin folder
-    scriptLoader
+    assetsService
 		.load([
 			"/app_plugins/markdowneditor/lib/markdown.converter.js",
             "/app_plugins/markdowneditor/lib/markdown.sanitizer.js",
             "/app_plugins/markdowneditor/lib/markdown.editor.js"
         ])
 		.then(function () {
-		    //this function will execute when all dependencies have loaded
-		    var converter2 = new Markdown.Converter();
-		    var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
+            //this function will execute when all dependencies have loaded
+            var converter2 = new Markdown.Converter();
+            var editor2 = new Markdown.Editor(converter2, "-" + $scope.model.alias);
             editor2.run();
 		});
 
     //load the seperat css for the editor to avoid it blocking our js loading TEMP HACK
-    scriptLoader.load(["/app_plugins/markdowneditor/lib/markdown.css"]);
+    assetsService.loadCss("/app_plugins/markdowneditor/lib/markdown.css");
 });
\ No newline at end of file