Как создать угловую директиву в разделе <head> документа?

Я новичок вangular.js, Я пытаюсь создать директиву, чтобы добавить некоторые заголовки и метатеги в<head> раздел HTML-документов, но у меня возникли некоторые проблемы.

мойindex.html Документ выглядит следующим образом:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <base href="/">
    <seo-title></seo-title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="/incl/js/myApp.js"></script>
</head>
<body >
    <div ng-view></div>
</body>
</html>

Мой JavaScript-код:

var app = angular.module ('myApp', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', { templateUrl: 'routes/home.html'})
        .when('/pageA', { templateUrl: 'routes/pageA.html'})
        .when('/pageB', { templateUrl: 'routes/pageB.html'})
        .otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode({
        enabled: true
    });

}]);

app.directive('seoTitle', function() {
    return {
        restrict: 'E',
        template: '<title>{{seo.title}}</title>'
    };
});

Когда я открываю инспектора, директива перемещается в<body> и не был заменен шаблоном:

Как я могу создать директивы в заголовке?

P.S .: Пример кода был бы великолепен!

Ответы на вопрос(4)

Ваш ответ на вопрос