title: How to set a base URL for HTTP calls and image loading with AngularJS
body: <p>I've been searching and so far I couldn't find a way to handle the following situation:</p>
  
  <p>I'd like to have one variable that represents my domain, something like <code>http://example.com/myserver/</code>. Anything that I would want to access is sublocaled in that domain. Such variable should be available for me in all <code>Services</code> as well as from HTML (for image loading purpose). For instance:</p>
  
  <pre><code>angular.module('App', ['App.providers', 'App.services', 'App.controllers', 'App.directives']).run('EndpointFactory', [function (EndpointFactory) {
      EndpointFactory.BASE = 'http://www.example.com/mydata';
  }]);
  
  angular.module('App.services', []).factory('PrizeService', ['$http', 'EndpointFactory', function ($http, EndpointFactory) {
      return {
          index: function () {
              return $http.post(EndpointFactory.BASE + '/prizes', {});
          }
      };
  }]);
  </code></pre>
  
  <p>This example above was one of my failed trials. Although I don't like the idea of having to inject a Factory at every Service, I was willing to do it until I faced the <code>&lt;img ng-src /&gt;</code> tag.</p>
  
  <pre><code>&lt;div&gt;
     &lt;img ng-src="{{EndpointFactory.BASE + prize.imagePath}}" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't access the EndpointFactory from this directive and I don't want to have to copy data from the factory to a <code>$scope</code> in every controller.</p>