title: Image Get Requests with AngularJS
body: <p>I am storing the the source string of an image to be rendered in HTML in the AngularJS controller, however it yields a 404 before the Angular controller is initialized.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code> &lt;div ng-controller="Cont"&gt;
        &lt;img src="{{imageSource}}"&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Angular controller:</p>
  
  <pre><code> var Cont = function($scope) {
        $scope.imageSource = '/tests.png';
   }
  </code></pre>
  
  <p>And the error I get (<code>%7D%7D</code> corresponds to the <code>{{</code> in the template).</p>
  
  <pre><code> GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 
  </code></pre>
  
  <p>How can I prevent this from happening? That is, only load the image when the Angular controller has been initialized?</p>