Using ng-bind causes Chrome History to show page URLs instead of actual titles

Question

My title tag:

<title ng-bind="title"></title>

When I navigate my app, the page title is updated correctly in the browser tab. However, when I look at the History both in Chrome and Opera, instead of page titles, I see raw URLs. This is not the case for Firefox, which shows page titles correctly.

I tried adding a placeholder title:

<title ng-bind="title">Placeholder Title</title>

but this does not resolve the problem.

You can see this in action by going to a website like Angular Material, navigate a couple of routes, and check your History in Chrome or Opera, and you will see something like:

https://material.angularjs.org/latest/demo/colors

instead of

Angular Material - Demos > Colors.

Why is this happening? How can this be fixed?

The only fix that I've found is to specify the title like this

<title>{{title}}</title>

Which makes Chrome and Opera History show actual titles instead of URLs. The problem with this approach is that the first loaded page will appear in history with title "{{title}}", which is why we use ng-bing="title" instead of {{title}} in the first place.

This is a problem since using ng-bing is a common way of setting titles in Angular applications, as the most upvoted answer here http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view indicates. — cute_ptr, Apr 07 '17 at 14:24

score 0 · Answer 1 · edited May 23 '17 at 12:32

Don't know which version of angular you're using, I tried to replicate and fix the problem which you encountered in Plunker, here is demo: https://run.plnkr.co/YhR3RzIizIQXRbZY/#/home

//If the link doesn't work for you go to the bottom of my answer and open Plunker, then in the preview section click on the little blue icon in top right corner. In the other case you won't be able to see titles.

And the code for it:

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

app.controller('MainCtrl', function($scope, $rootScope) {
});

app.controller('HomeController', function($scope) {
});

app.controller('AboutController', function($scope) {
});

app.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'embedded.home.html',
    controller: 'HomeController',
    title: 'Home'
  }).
  when('/about', {
    templateUrl: 'embedded.about.html',
    controller: 'AboutController',
    title: 'About'
  }).
  otherwise({
    redirectTo: '/home'
  });
});

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

        $rootScope.titleBase = 'Welcome to - ';
        $rootScope.$on('$routeChangeSuccess', function() {
            document.title = $rootScope.titleBase + $route.current.title;
        });
    }
  ]
)

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-route.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <script type="text/ng-template" id="embedded.home.html">
    <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
    <h1> About </h1>
  </script>

  <div>
    <div id="navigation">
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>

    <div ng-view></div>
  </div>
</body>

</html>

Here is my code in Plunker: https://plnkr.co/edit/8iZ4zjqj75Zz3SS0C5DE?p=preview

Basically, I used $rootScope to update my title and used document.title, unfortunately ng-bind doesn't work for browser's history. It seems that angular picks it up correctly.

I've also found these two similar questions:

Set Page title using UI-Router

How to change page title in Angular using $routeProvider

I am sorry but in my first answer, I didn't check my browser's history.

I run the plunker you suggested using Chrome 57 and Opera 43, and I still see the issue. Instead of seeing `home` and `about` in Browser History, I see `https://run.plnkr.co/epXAlPnQXjOJDuGD/#/home` and `https://run.plnkr.co/epXAlPnQXjOJDuGD/#/about`. BTW, the plunker you shared contains an earlier version of your code (not the one I see here on SO), so I updated it. — cute_ptr, Apr 09 '17 at 07:43
@cute_ptr I am sorry in my first answer I didn't check for the browser's history. I updated my answer, give it a try and let me know if it works for you, also check links, which I provided. — Oskar, Apr 09 '17 at 10:09

Using ng-bind causes Chrome History to show page URLs instead of actual titles

1 Answers1