title: How does angular still render a image if I use src instead of ng-src?
body: <p>As per angular docs and their explanation we should use <code>ng-src</code> instead of <code>src</code> in an image tag where the image url is an angular expression.  </p>
  
  <p>e.g. <code>&lt;img ng-src="{{country.flagURL}}" width="100"&gt;</code>  </p>
  
  <p>But in my case if I use <code>src</code>, the browser still renders the image. In the console I can see one failed call for the image where it's trying to access the exact expression like <code>.../Desktop/%7B%7Bcountry.flagURL%7D%7D</code>  </p>
  
  <p>However, later there is another call for the image which is initiated from angular.js which actually renders the image and displays it in the browser.  </p>
  
  <p>So my question is - what is the use of <code>ng-src</code> if the same can be achieved by using <code>src</code>? It appears that only one extra network call will be there.<br>
  And what exactly happens in angular to render the image when I don't use <code>ng-src</code>?  </p>
  
  <p>Below is my code snippet. You can run and see. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="countryApp"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Angular.js Example&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http){
          data = [
          {
            "name": "China",
            "population": 1359821000,
            "flagURL": "https://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg"
          },
          {
            "name": "India",
            "population": 1205625000,
            "flagURL": "https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg"
          },
          {
            "name": "United States of America",
            "population": 312247000,
            "flagURL": "https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg"
          }
        ];
            $scope.countries = data;
        });
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-controller="CountryCtrl"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Country&lt;/th&gt;
          &lt;th&gt;Population&lt;/th&gt;
          &lt;th&gt;Flag&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr ng-repeat="country in countries"&gt;
          &lt;td&gt;{{country.name}}&lt;/td&gt;
          &lt;td&gt;{{country.population}}&lt;/td&gt;
          &lt;td&gt;&lt;img src="{{country.flagURL}}" width="100"&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>