title: Set base URL dynamically in angular app
body: <p>I am working on an AngularJS project. I removed # from the URL using  and $locationProvider.html5mode().</p>
  
  <p>Depending upon environment, I want the href attribute for base tag to be dynamically updated from a config file. I created an env.js that contains simple configurations.</p>
  
  <p><strong>env.js</strong></p>
  
  <pre><code>(function (window) {
    window.__env = window.__env || {};
  
    window.__env.baseUrl = '/';
  
    window.__env.enableDebug = true;
  }(this));
  </code></pre>
  
  <p>I used this env file in my app.js and inside app.run() updated $rootScope.baseurl to baseUrl in env.js. It is working fine inside console.log() but not in my index.html. I am getting the uncompiled code i.e <code>{{ $rootScope.baseurl }}</code></p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import controllers from './controllers';
  
          var env = {};
  
          if (window) {
              Object.assign(env, window.__env);
          }
  
          var app = angular.module('myapp', ['ui.router', controllers]);
  
          app.constant('__env', env);
  
          app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
  
              $urlRouterProvider.otherwise("/");
  
              $stateProvider.state("home", {
                  url: "/",
                  templateUrl: "app/components/home/home.view.html",
                  controller: "HomeController"
              }).state("login", {
                  url: "/login",
                  templateUrl: "app/components/login/login.view.html",
                  controller: "LoginController"
              });
  
              $locationProvider.html5Mode({
                  enabled: true,
                  requireBase: true
              });
          });
  
         app.run(function($rootScope, __env){
            $rootScope.baseurl = __env.baseUrl;
            console.log($rootScope.baseurl);
        });
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>    &lt;html ng-app="myapp"&gt;
          &lt;head&gt;
              &lt;title&gt;MYAPP&lt;/title&gt;
              &lt;base href="{{ baseurl }}"&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
              &lt;div ui-view&gt;
              &lt;/div&gt;
          &lt;/body&gt;
  
          &lt;script type="text/javascript" src="public/lib/js/angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="public/lib/js/angular-ui-router.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="env.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="public/app.js"&gt;&lt;/script&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>Please help me out . Thanks</p>