title: How to use img ng-src in AngularJS on android phone?
body: <p>The most relevant Q &amp; A I've found is from <a href="https://groups.google.com/forum/#!topic/angular/NRutixKCQLY" rel="nofollow noreferrer">google groups</a> and I've read the <a href="https://docs.angularjs.org/api/ng/directive/ngSrc" rel="nofollow noreferrer">AngularJS docs for <code>ngSrc</code></a>.</p>
  
  <p>I'm trying to use <a href="http://angular-ui.github.io/bootstrap/#/carousel" rel="nofollow noreferrer">Angular UI Bootstrap - Carousel</a> in my app and I noticed the demo uses absolute URLs for slides like this: <code>image: 'http://placekitten.com/' + newWidth + '/300'</code>.</p>
  
  <p>It works on my localhost (mac) but I don't think images (slides) display on my android google nexus phone because I only use relative image paths like this: <code>image: '/images/help/hello-1.jpg'</code>.  </p>
  
  <p><strong>How can I use relative image paths with <code>ng-src</code> directive without having <code>http://</code> on an android phone?</strong> 
  <strong>Is using <code>$location</code> a possible solution (<a href="https://stackoverflow.com/questions/21837851/angularjs-ng-src-in-ie8-image-not-loaded-and-unsafe-added-to-path">from this question</a>)?</strong></p>
  
  <p><strong>My html:</strong></p>
  
  <pre><code>&lt;div ng-controller="helloCtrl" class="slide-container"&gt;
    &lt;div&gt;
      &lt;carousel interval="myInterval"&gt;
        &lt;slide ng-repeat="slide in slides" active="slide.active"&gt;
          &lt;img ng-src="{{slide.image}}" style="margin:auto;"&gt;
          &lt;div class="carousel-caption"&gt;
            &lt;h3&gt;{{slide.headline}}&lt;/h3&gt;
            &lt;p&gt;{{slide.text}}&lt;/p&gt;
            &lt;a ng-href="mailto:help@help.com?subject=help-enquiry" class="menu_button"&gt;&lt;p&gt;Contact Us&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/slide&gt;
      &lt;/carousel&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>my js:</strong></p>
  
  <pre><code>'use strict';
  
  var app = angular.module('helloApp');
  
  app.controller('helloCtrl', function ($scope) {
    $scope.slides = [
      {
        image: '/images/hello-1.jpg',
        headline: 'Help1',
        text: 'Lorem ipsum dolor sit amet, consectetur adipisic.'
      },
      {
        image: '/images/hello-2.jpg',
        headline: 'Help2',
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.'
      }
    ];
  });
  </code></pre>