title: How to change page title in Angular using $routeProvider
body: <p>I found several similar questions, <a href="https://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view/17751833#17751833">however none of the answers helped</a>. They all seem to involve some type of <code>$location</code> dependencies that I'm unable to get injected right.</p>
  
  <p>My code below:</p>
  
  <pre><code>(function() {
  
      // App dependencies
      var app = angular.module('portalExchange',
                          ['ngRoute',
                           'app-products',
                           'app-manage',
                           'app-profile']);
  
      // [ Main Controller ] : PortalController
      app.controller('PortalController', function($scope) {
          if ($('.top_link_dashboard').hasClass('unactive_top')) {
              $('.top_link_dashboard').removeClass('unactive_top');
              $('.top_link_dashboard').addClass('active_top');
          }
      });
  
      // Controller for Dashboard
      app.controller('DashboardController', function() {
      });
  
      // Controller for Developers
      app.controller('DevelopersController', function($scope) {
          // Page.setTitle('Developers');
      });
  
      // Controller for Quote
      app.controller('QuoteController', function($scope) {
          // Page.setTitle('Begin Quote');
      });
  
      // Directive for Header
      app.directive('appHeader', function () {
          // Type of Directive, E for element, A for Attribute
          // url of a template
          return {
              restrict: 'E',
              templateUrl: 'templates/modules/globals/app-header.html'
          };
      });
  
      // Directive for Footer
      app.directive('appFooter', function () {
          return {
              restrict: 'E',
              templateUrl: 'templates/modules/globals/app-footer.html',
              controller: function(){
                  this.date = Date.now();
              },
              controllerAs:'footer'
          };
      });
  
      // configure our routes
      app.config(function($routeProvider) {
          $routeProvider
  
          // route for the dashboard page
          .when('/', {
              templateUrl : 'templates/sections/app-dashboard.html',
              controller  : 'DashboardController'
          })
  
          // route for the dashboard page
          .when('/dashboard', {
              title : 'My Dashboard',
              templateUrl : 'templates/sections/app-dashboard.html',
              controller  : 'DashboardController'
          })
  
          // route : Developers Page
          .when('/developers', {
              title : 'For Developers',
              templateUrl : 'templates/sections/app-developers.html',
              controller  : 'DevelopersController'
          })
  
          // route : Begin Quote
          .when('/quote', {
              title : 'Begin Quote',
              templateUrl : 'templates/sections/app-quote.html',
              controller  : 'QuoteController'
          });
      });
  
      app.run(['$rootScope', '$route', function($rootScope) {
          $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
              if (oldVal !== newVal) {
                  document.title = $route.current.title;
              }
          });
      }]);
  
  })();
  </code></pre>
  
  <p>The RUN function</p>
  
  <pre><code>app.run(['$rootScope', '$route', function($rootScope) {
      $rootScope.$on('$routeChangeSuccess', function(newVal, oldVal) {
          if (oldVal !== newVal) {
              document.title = $route.current.title;
          }
      });
  }]);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="portalExchange" ng-controller="PortalController as portal"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title ng-bind="title"&gt;myApp&lt;/title&gt;
  &lt;/head&gt;
  </code></pre>