title: AngularJS img ng-src binding doesn't work
body: <p>I'm trying to bind the ng-src of a img with a $scope variable but it doesn't refresh the image when the variable changes.</p>
  
  <p><strong>THE HTML</strong></p>
  
  <pre><code>&lt;body ng-app="CameraApp" ng-controller="cameraController"&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div align="center"&gt;
      &lt;img id="myImage" ng-src="{{ imageSrc }}" ng-click="TakePicture();"/&gt;&lt;br/&gt;&lt;br/&gt;
      &lt;input type="button" ng-click="TakePicture();" value="TAKE PICTURE" /&gt;&lt;br/&gt;&lt;br/&gt;
      &lt;input type="button" ng-disabled="{{ savePict }}" value="SAVE PICTURE"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>THE JS</strong></p>
  
  <pre><code>var app = angular.module('CameraApp', ['ngTouch']);
  
  app.controller('cameraController', function ($scope) {
  
  $scope.savePict = true;
  $scope.imageSrc = '';
  
  
  $scope.TakePicture = function () {
      navigator.camera.getPicture(onSuccess, onFail, {
          quality: 50,
          destinationType: Camera.DestinationType.FILE_URI
      });
  }
  
  function onSuccess(imageUri) {
      $scope.imageSrc = imageUri;
  }
  
  function onFail(message) {
      alert('Failed because: ' + message);
      document.getElementById("myImage").src = "";
      $scope.savePict = true;
    } 
  });
  </code></pre>