Inject template from ngRoute into Directive AngularJS

Question

Is it possible to inject (or maybe merge will be better word) aa template from ngRoute into the template in directive?

Let's explain in example:

There is a config with ngRoute

angular.module('dynamic-menu').config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('#', {
        controller: 'MainController',
        template: '<p>Main Page</p>'
    });
    $routeProvider.when('#/productReturn/', {
        controller: 'ProductReturnController',
        template: '<p>Product Return Page</p>'
    });
    $routeProvider.when('#/demand/', {
        controller: 'DemandController',
        template: '<p>Demand Page</p>'
    });
}]);

I don't know that we need a controller to do sth?

And the directive:

angular.module('dynamic-menu').directive('menuTemplate', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var template = {
                'searcher': "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\">"
                          + "<div class=\"container-fluid\">"
                              + "<div class=\"navbar-header\">"
                                  + "<span class=\"navbar-brand\" > INSERT TEMPLATE HERE </span>"
                              + "</div>"
                          + "</div> <!-- /.container-fluid -->"
                       + "</nav>",
                'main' : (...) <- not important
            }; //var template END

            var templateObj;
            if (attrs.templateName) {
                templateObj = $compile(template[attrs.templateName])(scope);
            }
            else {
                templateObj = $compile(template['main'])(scope);
            }
            element.append(templateObj);
        }
    };
}]);

Here is the line in the directive where I want to paste the template:

"<span class=\"navbar-brand\" > INSERT TEMPLATE HERE (for. ex. <p>Product Return Page</p>) </span>"

And in the HTML

<menu-template template-name="searcher"></menu-template>

Is it possible?

Or maybe - how to pass the value in the Controller into the directive without ng-view?

angular.module('dynamic-menu').controller('ProductReturnController', ['$scope', function ($scope) {
    $scope.header = "PROOODDUUUCCCTTT REEETUUURRRNNN TTTITTTTLEEEEE";
}]);

UPDATE:

I have a few pages, for. ex. in page1 I will use my <menu-template template-name="main"></menu-template>

and page2 page3 page4 - inside these pages, I will use my <menu-template template-name="searcher"></menu-template>

Answer 1

If your route consist of only the menuTemplate directive (as it seems to be), then just include that directive in the template:

template: '<menu-template template-name="search">SOME TEMPLATE FOR SEARCH</menu-template>'

Then make the directive transclude its contents. And, there is no need to manually $compile (although you can) - you can just define this in the directive template:

var template = {
  search: "<nav class='navbar'>\
             etc...\
             <div ng-transclude></div>\
           </nav>",

  main: "..."
};

return {
  template: function(element, attrs){
    return template[attrs.templateName]; 
  },
  transclude: true,
  link: function(scope, element){
    // whatever else (other than the template) you might need here
  }
}