AngularJS dynamic page title keeps loading curly brackets first

Question

<title ng-show="pageName">{{ $root.pageName }} - Domain Name</title>

I'm trying to change the page title dynamically, when the page is loading the title preloads {{ $root.pageName }} - Domain Name instead of being - Domain Name then loading $rootScope.pageName when its rendered.

Is there a way to hide {{ $root.pageName }} from being shown on page load till the application picks up the variable?

Answer 1

you can use ng-cloak directive to hide raw (uncompiled) form data.i think it will help you.

<title ng-cloak>{{ $root.pageName }} - Domain Name</title>

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

see this link for detail.

Answer 2

You can do it like this:

<title ng-bind="$root.title + ' - Your site'">Your site</title>

Note that in this case the title is on the $rootScope.

EDIT: Just tested and it looks like the dash keeps showing, however this should prevent it:

<title ng-bind="$root.title ? $root.title + ' - Your site' : 'Your site' }]}">Your site</title>