 <p>if you just want a quick implementation i might recommend putting something like {{title}} in your html template, and configuring and using $rootScope.title to update this value from each of your controllers.</p> <p>implementation would be something like this plus the update to your template.</p> <pre class="lang-js prettyprint-override"><code>angular.module('myApp', []) .run(function($rootScope) { $rootScope.title = ""; }) .controller('myCtrl', function($scope, $rootScope) { $rootScope.title = "Navigation Bar Title" }) </code></pre> <p>but i think that a better way to do it would actually be to create a state for your navigation bar and make each of your current states a different child state of your navigation state. Because of scope inheritance you would have access to the navigation states $scope.title in any nested child state.</p> <p>here is a good place to learn how that should work.</p> <p><a href="https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-custom-data" rel="nofollow">https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-custom-data</a></p>