title: How to set AngularjJS base URL dynamically based on fetched environment variable?
body: <p>I have a development and production environment in which my URL's differ:</p>
  
  <p>production:</p>
  
  <p><code>www.exmaple.com/page</code></p>
  
  <p>development:</p>
  
  <p><code>dev.environment/project/page</code></p>
  
  <p>I know that I can set the base URL in AngularJS with the </p>
  
  <p><code>&lt;base href='/project/' /&gt;</code> </p>
  
  <p>but that doesn't help me out here. Before I load my AngularJS application I fetch a config file (in app.js, with the <code>.run</code> statement, which reads a variable that has the environment:</p>
  
  <pre><code>]).run([
    '$rootScope',
    '$http',
    function (
      $rootScope,
      $http
    ) {
      var configDeferred = $q.defer();
  
      // fetch config and set the API    
      $http.get('config.json').then(function(response) {
        $rootScope.config = response.data;
        configDeferred.resolve();
      });
  
      // Wait for the config to be loaded, then go to state
      $rootScope.$on('$stateChangeStart', function (event, next, current) {
        event.preventDefault();
        $q.all([configDeferred.promise]).then(function() {
          $state.transitionTo(next.name);
          return;
        });
      });
  </code></pre>
  
  <p><strong>Is there a way to dynamically set the base URL, based on a fetched config file in AngularJS (maybe with a .htaccess)?</strong></p>
  
  <p><strong>Attempt 1:</strong>
  Try to get the config via <code>.run</code> and set the base url via ng-href:</p>
  
  <p>Edit the following line of code in my app.js:</p>
  
  <pre><code>// fetch config and set the API    
  $http.get('config.json').then(function(response) {
    $rootScope.config = response.data;
    $rootScope.baseUrl = response.data.baseUrl; // '/project/'
    configDeferred.resolve();
  });
  </code></pre>
  
  <p>and in my index.html:</p>
  
  <pre><code>&lt;base ng-href="{{baseUrl}}" /&gt;
  </code></pre>
  
  <p>It looks like this is not working: when I change the href attribute of  tag to ng-href, it loads the content correctly, but changes my URL to <code>dev.environment/page</code> instead of <code>dev.environment/project/page</code></p>
  
  <p><strong>UPDATE:</strong>
  The config file:</p>
  
  <pre><code>{
    "mode": "development",
    "baseUrl": "/project/"
  }
  </code></pre>