title: AngularJS: Dynamic image change inside IMG tag
body: <p>Using AngularJS with a Node.js server and Express 4 (MEAN), I have a plain input field for typing in the name of an image or a username as a search query which will then be sent to my server. The server responds by sending an image which is then to be dynamically displayed inside an IMG tag next to the input field. Again, the server directly responds by sending the desired image using res.sendfile(res.sendfile(path/image.jpg)). </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="text" ng-blur="loadImage()" ng-model="imageQUERY"&gt;
  &lt;img data-ng-src="data:image/jpg,{{remoteDynamicImage}}"&gt;
  </code></pre>
  
  <p>AngularJS:</p>
  
  <pre><code>$http({
     method: 'GET',
     url: '/loadRemoteImage',
     data: {'url': $scope.imageQUERY}
  }).success(function(data, status, headers, config){
    if(data){
       //todo: render received image data inside IMG tag
       $scope.remoteDynamicImage = data;
    }
  });
  </code></pre>
  
  <p>I am pretty much stuck here as the code does not work: the image seems to be transferred (according to firebug) but won't be displayed inside the image tag. What is the last missing ingredient? Do I have to base64 encode the image (like this approach <a href="https://stackoverflow.com/questions/28235246/angularjs-display-base64-image">angularJS display base64 image</a>) or is there another way without base64 encoding? I couldn’t find anything helpful in the Angular doc. Thanks for any hint.</p>