AngularJS V1.4.7 директива templateUrl динамический путь

У меня проблема с templateUrl: частью угловых указаний. Я пытаюсь установить динамический путь, но он не работает, и я не могу понять это. Я проверил синтаксис, и все, похоже, проверяется, он просто не вытаскивает шаблон из этого URL-адреса.

Вот мой код директивы:

var app = angular.module('docMan', ['ui.sortable']);

//global variable

app.run(['$rootScope','getResourceURL', function($rootScope, getResourceURL){

	getResourceURL('FOPS_Resource').then(function(result){$rootScope.FOPSbaseURL = result;
	},
						function(error){$scope.error = result;})

	
}]);

//Handle to grab SF info about the Static Resource base URL
app.factory('getResourceURL', ['$q','$rootScope', function($q, $rootScope){

		return function (inputString) {

			var deferred = $q.defer();

			Visualforce.remoting.Manager.invokeAction(
				'FO_Manager.GetResourceURL', 
				inputString,
				function(result, event){
					$rootScope.$apply(function(){
					if(event.status) {
						deferred.resolve(result);
					} else {
						deferred.reject(event);
					}
				})
			},
			{buffer: true, escape: true, timeout: 30000}
		);
		return deferred.promise;
	}
}]);

app.directive('sideNav', function($rootScope){

	return{

		restrict: 'E',
	    scope: {
	    	info: '='
	    },
	    templateUrl: function($rootScope){ return $rootScope.FOPSbaseURL + '/js/custom/directives/sideNav.html';}

	};
});

Затем, когда я помещаю теги <sideNav info="SideNav"></sideNav> где SideNav находится в области контроллера, окружающего его, ничего не происходит, шаблон не растягивается.

Вот шаблон: '

                    <li class="mainCat">
                        <a href="#" id="CatHeader">
                            <i class="{{item.displayIcon}} left-bar"></i>
                            <span ng-bind-html="item.label | html"></span>
                        </a>
                        <ul class="subCat"> 


                            <li ng-repeat="subItem in item.docTypes">
                                <a href="#" >
                                <i class="fi-folder"></i>
                                <span ng-bind-html="subItem.Name | html"></span>
                                </a>
                            </li>


                        </ul>
                    </li>

'

Любая помощь по этому вопросу была бы весьма признательна.

ОБНОВЛЕНО:

Итак, теперь благодаря помощи ниже что-то отображалось, но теперь проблемы в том, что $rootScope.FopSbaseURL не заполняется должным образом в этом "app.directive" (функция foSidenav, function ($ rootScope) {

return{

    restrict: 'E',
    scope: false,
    templateUrl: function(){ 

        $rootScope.snipSideNav = $rootScope.FOPSbaseURL + '/js/custom/directives/sidenav.html';
        return $rootScope.snipSideNav;


    }
};

}); "это то, что я хочу в rootScope, но он не тянет в шаблонеURL