如何在AngularJs中使用UI-Route在每个页面中设置动态元数据

Question

我正在使用AngularJs构建的应用程序，但是在动态设置元标题，名称和描述时遇到了一些问题。我尝试使用“ ui.router.metatags”，但问题是在任何浏览器中查看源代码时均未显示元标题，名称，描述。它仅显示为{{meta.title}}，而不显示所注入的实际数据。

这是我的代码：

$stateProvider
.state('home', {
    url: "/",
    metaTags: {
        title: 'title1',
        description: 'description',
        keywords: 'keyword1,keyword2,...',
        properties: {
            'og:title': 'title1'
        }
    },
    views : {
        "" : {
            templateUrl:"/home/home.html",
            controller: 'homeCtrl',
            controllerAs:'vm',
        }
    },

    resolve: {
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load('home'); // Resolve promise and load before view
        }]
    }
})

这是索引文件代码：

<title ng-bind="MetaTags.title">{{MetaTags.title}}</title>
<meta name="description" content="{{MetaTags.description}}">
<meta name="keywords" content="{{MetaTags.keywords}}">