title: Display images through html img tag with angularjs and ionic
body: <p>I'm currently doing an hybrid mobile app with <a href="http://ionicframework.com/" rel="noreferrer">ionic</a> and Angularjs and i'm trying to display images through an img html tag. My page is composed of a caroussel at the top (which works well, it displays images) and a list with small images. 
  In the controller of my page there is : </p>
  
  <pre><code>app.controller('SalleCtrl', function ($scope,$location) {
  
  $scope.salle = {
      "num": "2",
      "imgR": [
          "img/art_affiche_6_thumb-300x300.jpg",
          "img/art_affiche_6_thumb-300x300.jpg"
      ],
      "title": "Salle 2 : Premières peintures",
      "_audio_guide": [],
      "_audio_guide_fe": [],
      "_audio_guide_en": [],
      "artworks": [
          {
              "img": "img/art_affiche_6_thumb-300x300.jpg",
              "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-14-2/",
              "title": "Oeuvre 14"
          },
          {
              "img": "img/art_affiche_9_thumb-300x300.jpg",
              "href": "http://172.16.12.158/wordpress/mcm_oeuvre/oeuvre-3/",
              "title": "Oeuvre 3"
          }
      ]
  };
  });
  </code></pre>
  
  <p>And in my html page there is : </p>
  
  <pre><code>&lt;ion-view title="{{salle.title}}"&gt;
  
  &lt;ion-nav-buttons side="right"&gt;
      &lt;button menu-toggle="right" class="button button-icon icon ion-navicon"&gt;&lt;/button&gt;
  &lt;/ion-nav-buttons&gt;
  &lt;ion-content class="has-header" id="" &gt;
      &lt;ul rn-carousel class="image"&gt;
           &lt;li ng-repeat="image in salle.imgR" style="background-image:url({{ image }});background-color:black;background-repeat:no-repeat;background-position:center center;background-size : contain;"&gt; 
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="list"&gt;
          &lt;a ng-repeat="artwork in salle.artworks" class="item item-avatar" href="{{artwork.href}}"&gt;
            &lt;img ng-src="{{artwork.img}}"&gt;
            &lt;h2&gt;{{artwork.title}}  {{artwork.img}}&lt;/h2&gt;   
          &lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p></p>
  
  <p>When I display it on a browser everything works well. But when I try on my smartphone the caroussel works, it displays images, but the list doesn't show the images, unstead of  {{artwork.img}} show me all the images.
  I try to :</p>
  
  <ol>
  <li>replace 'ng-src' by 'src' but nothing happens</li>
  <li>replace ng-src="{{artwork.img}}" by ng-src="img/art_affiche_6_thumb-300x300.jpg" it works.</li>
  </ol>
  
  <p>Apparently the binding is not correctly made... Have you any idea why? And how resolve it?!
  Moreover on my smartphone, the path of the images looks like "cdvfile://localhost/persistent/...". The caroussel works well, but the list of image doesn't works, and when I translate "cdvfile://localhost/persistent/..." to "file://mnt/sdcard/..." it works. Why?!</p>