title: How to dynamically set title tag on page load in AngularJS?
body: <p>I'm trying to set the page title dynamically on page load. Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" charset="utf-8" /&gt;
      &lt;title ng-bind="title"&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
              display: none !important;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="font-family:sans-serif" ng-controller="clicks"&gt;
  
      &lt;h1&gt;Hello &lt;span ng-cloak class="ng-cloak"&gt;{{ user.name }}&lt;/span&gt;&lt;/h1&gt;
      &lt;input type="text" ng-model="user.name" placeholder="Enter a name here" &gt;
  
      &lt;h2&gt;Clicked {{ counter.clicks }} times&lt;/h2&gt;
      &lt;button ng-click="count()" &gt;Click&lt;/button&gt;
  
      &lt;script src="vendor/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          angular.module("myApp", ["myApp.controllers"]);
  
          angular.module("myApp")
              .run(function($rootScope) {
                  $rootScope.title = "Angular Learning 1";
              });
  
          angular.module("myApp", [])
              .controller("clicks", function($scope) {
                  $scope.user = {
                      name: "Sithu"
                  }
                  $scope.counter = { clicks: 0 };
                  $scope.count = function() {
                      $scope.counter.clicks += 1;
                  }
              });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I suppose that setting <code>$rootScope.title</code> in <code>run()</code> could update the title in page load, but it doesn't.</p>