How to change the page title using a variable in Angular Js? [duplicate]

Question

I am changing my title dynamically in AngularJs, using the following code:

app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            title: 'My Tagline',
            controller : 'IndexController',
            templateUrl : 'static/app_partials/index.html'
        })
        .when('/categories/:categoryPk/', {
            title: $scope.category.name,
            controller : 'CategoryController',
            templateUrl : 'static/app_partials/category.html'
        })
        .otherwise({ redirectTo : '/' });
}]);

Html

<title ng-bind="'My Brand - ' + title">My Brand</title>

So, for the IndexController, the title is just a simple string, so this method works nicely. However, for my CategoryController, I want the title to be generated from a variable, specifically, $scope.category.name, which I initialize in my controller code. How can I do this? Any help?

You can also find the answer here: stackoverflow.com/questions/12506329/… — P.S.
– P.S., Commented May 27, 2017 at 14:10

mastilver · Accepted Answer · 2017-05-27 13:48:56Z

3

use ng-bind-template as follow:

<title ng-bind-template="My Brand - {{$root.title}}">My Brand</title>

answered May 27, 2017 at 13:48

mastilver

6777 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

also have to remove title: $scope.category.name, from routing config...there is no $scope there

darkhorse Over a year ago

And then how will put my variable as the title from the controller?

mastilver Over a year ago

@TahmidKhanNafee You could do it inside the routeChangeSuccess even handler

Amadou Beye · Accepted Answer · 2017-05-27 14:23:47Z

0

Take a look at ng-meta to set dynamic meta tags in your AngularJS single page application

answered May 27, 2017 at 14:23

Amadou Beye

2,8583 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to change the page title using a variable in Angular Js? [duplicate]

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related