Skip to content
A simple and easy to use (painless) module to manipulate titles in angular apps.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


painlessTitle is an angular module to manipulate titles in angular apps with a simple and easy (painless) way.



  • directly from the git repository: git clone
  • from the npm registry: npm install angular-painless-title
  • from the bower registry: bower install angular-painless-title


Include the script and you have to set up the ng-app at the html element, then you bind the title element.

<!doctype html>
<html ng-app="dummyApp">
  <!-- You should define a title value, so a robot can read this title without JavaScript. -->
  <title ng-bind="page.title">My Site</title>
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
  <script src="angular-painless-title.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/home.js"></script>
  <!-- The head title. You can get the head title which you set in a router or in a controller. -->
  <h1 ng-bind="page.headTitle"></h1>
  <div ng-view></div>

Inject the module then config it and bootstrap (instantiate) the painlessTitle factory.

var dummyApp = angular.module('dummyApp', ['angularPainlessTitle']);

['painlessTitleProvider', function(painlessTitleProvider) {
  painlessTitleProvider.setSuffix('My Site');
  // You should set up a router here.
.run(['painlessTitle', function(painlessTitle) {
  // You can remove this line, just make sure to instantiate painlessTitle.

Now you can set a title (dynamic) from a controller.

var dummyAppControllers = angular.module('dummyAppControllers', ['angularPainlessTitle']);

dummyAppControllers.controller('HomeController', ['painlessTitle', function(painlessTitle) {
  painlessTitle.setTitle('Home'); // complete title: Home | My Site

Or you can set a title (static) from a router if you don't need a controller (static view).

  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeController' // complete title (specified in the controller): Home | My Site
  .when('/about', {
    templateUrl: 'views/about.html',
    title: 'About' // complete title: About | My Site
  .when('/no_title', {
    templateUrl: 'views/no_title.html' // no controller, no title from the router, so complete title: My Site

If you don't set a title you will have just the title suffix as a complete title, eg.: My Site



The MIT License (MIT)

You can’t perform that action at this time.