AngularJSValue of title

How do you change the value of the title?

To change the value of a angular app of title you do:

$scope.title = 'Changed Value'

In the MainController.Js

Your app should be able to make the browser title bar say whatever you want it to say. This cookbook explains how to do it.

See the live example / download example.

The problem with

The obvious approach is to bind a property of the component to the HTML <title> like this:


I am using ng-view to include AngularJS partial views, and I want to update the page title and h1 header tags based on the included view. These are out of scope of the partial view controllers though, and so I can’t figure out how to bind them to data set in the controllers.

If it was ASP.NET MVC you could use @ViewBag to do this, but I don’t know the equivalent in AngularJS. I’ve searched about shared services, events etc but still can’t get it working. Any way to modify my example so it works would be much appreciated.


<html data-ng-app="myModule">
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>