Angular Page Title Directive (http://plnkr.co/edit/buNRB4v1hOt7tQt7NAeX?p=preview)

app.js

(function(angular, undefined) {
  'use strict';
  
  angular.module('app', ['title', 'ui.router'])
    .config(appConfig);
    
    
  function appConfig($stateProvider) {

    $stateProvider.state('app.dashboard', {
      url: '/',
      settings: {
        pageTitle: 'Dashboard',
      }
    });
  }

  
})(angular);

title.controller.js

(function(angular, undefined) {
  'use strict';


  angular.module('title')
    .controller('TitleController', TitleController);


  function TitleController($scope) {
    var vm = this;

    vm.pageTitle = '';

    $scope.$on('$stateChangeSuccess', updatePageTitle);

    //////////

    function updatePageTitle(event, toState) {
      if (toState) {
        if (toState.settings && toState.settings.pageTitle.trim() !== '') {
          vm.pageTitle = toState.settings.pageTitle.trim() + ' | App';
          return true;
        }
      }

      return 'App';
    }

  }


})(angular);

title.js

(function(angular, undefined) {
  'use strict';

  angular.module('title', []).directive('title', TitleDirective);


  function TitleDirective() {
    return {
      restrict: 'E',
      controller: 'TitleController',
      scope: {
        name: '='
      },
      controllerAs: 'title',
      bindToController: true,
      template: '{{title.pageTitle}}'
    }
  }

})(angular);