title: How to set a variable from an $http call then use it in the rest of the application WITHOUT making the whole application asynchronous
body: <p>I have this data</p>
  
  <pre><code>{
    "config": {
      "RESTAPIURL": "http://myserver/myrestsite"
    }
  }
  </code></pre>
  
  <p>and  I have this factory that reads that data</p>
  
  <pre><code>'use strict';
  
  angular.module('myApp').factory('api',
    ["$http", "$q",
    function ($http, $q) {
  
      function _getConfiguration() {
        var deferred = $q.defer();
        $http.get('/scripts/constants/config.json')
        .success(function (data) {
          deferred.resolve(data);
        })
        .error(function (data, status) {
          deferred.reject(data, status);
        });
        return deferred.promise;
      }
  
      function _restApiUrl() {
        // this doesn't work either. _getConfiguration() doesn't resolve here.
        return _getConfiguration().RESTAPIURL + '/api/';
      }
  
      return {
        URL: _restApiUrl
      }
    }
    ]
  );
  </code></pre>
  
  <p>Then to use it </p>
  
  <pre><code>'use strict';
  
  angular.module('myApp').factory('AuthService', function ($http, $q, api,NotificationService) {
  
      function _get(creds) {
  
          var deferred = $q.defer();
  
          $http({method: 'GET', url: api.URL() + api.AUTH, headers: {
              'Authorization': 'Basic '+creds}
          })
          .success(function (data, status, results, headers) {
              deferred.resolve(results);
          })
          .error(function (data, status) {
              NotificationService.redirect(status);
              deferred.reject(data, status);
          });
          return deferred.promise;
      }
  
      return {
          get:_get
      };
  });
  </code></pre>
  
  <p>So when I'm using it I am doing <code>api.URL()</code> and it's not working.</p>
  
  <p>It used to be hard coded URL so to call it used to be <code>api.URL</code>. I really don't want to go through the whole app and convert everything to <code>api.URL().then(...)</code>. That would suck.</p>
  
  <p>So how can I nail down this value as a "property" instead of an asynchronous promise that has to be called over and over?</p>
  
  <p>Call it once, fine. Get the value. Put it somewhere. Use the value. Don't ever call the <code>$http</code> again after that.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is turning up to be one of the most successful questions I've ever asked, and I am gratefully going through each answer in turn. Thank each one of you.</p>