title: AngularJS routeProvider
body: <p>In the following code snippet:</p>
  
  <pre><code>var root = "default";
  
  app.config(['$routeProvider', function ($routeProvider) {
     $routeProvider
      .when("/",          {templateUrl: "partials/prototypes.html", controller: "PageCtrl"})
  
      .when("/gmp-01",    {templateUrl: setroot("gmp-01/") , controller: "PageCtrl"} )
      .when("/gmp-02",    {templateUrl: setroot("gmp-02/") , controller: "PageCtrl"} )
      .when("/gmp-03",    {templateUrl: setroot("gmp-03/") , controller: "PageCtrl"} )
      .when("/gmp-04",    {templateUrl: setroot("gmp-04/") , controller: "PageCtrl"} )
  
      .when("/login",     {templateUrl: constructRoute("login.html") , controller: "PageCtrl"} );
  }]);
  
  function setroot(r) {
    root = r; 
    return "partials/" + root + "start-page.html";
  }
  </code></pre>
  
  <p>When I run the app and navigate to "/", "setroot" is called 4 times regardless of the fact that I have not yet requested the "gmp-0x" routes. this causes the value of the root to be set to the last parameter passed in by "setroot" which in this case is "gmp-04/". </p>
  
  <p>How can I make sure the value of "root" is set only when the route is requested? </p>