title: Angularjs fails to dynamic change image src
body: <p>Hello i'm building an application where i want to dynamically change the source of an image in order to force reload it . The problem is that in order of this i only get a broken image on the browser. Instead , if a run the function manually by a button it runs perfect .</p>
  
  <p>HTML document</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app='cameraApp'&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Node JS Camera&lt;/title&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;
          &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src='https://code.angularjs.org/1.4.4/angular-sanitize.min.js'&gt;&lt;/script&gt;
          &lt;script src="cameraApp.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="jumbotron"&gt;
                  &lt;h1&gt;Welcome to NodeJS Camera v1&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div ng-controller="HomeController"&gt;
                  &lt;div class="cameraControl col-md-5"&gt;
                      &lt;p&gt;Here is the camera control&lt;/p&gt;
                      &lt;button class="btn btn-default" ng-click="getSnapshot()"&gt;Snapshot&lt;/button&gt;
                      &lt;button class="btn btn-info" ng-click="intervalFunction()"&gt;Start Feed&lt;/button&gt;    
                  &lt;/div&gt;
                  &lt;div class="lifeFeed col-md-7"&gt;
                      &lt;p&gt;Here is the live feed&lt;/p&gt;
                      &lt;p&gt;&lt;button class="btn btn-default" ng-click="readSnapshot()"&gt;Snapshot Read&lt;/button&gt;&lt;/p&gt;
                      &lt;img width='600' height='600' ng-src="{{snapshot}}" alt="SnapShot taken"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>cameraApp.js</p>
  
  <pre><code>var cameraApp = angular.module('cameraApp',[]);
  
  cameraApp.controller('HomeController', function($scope,$http,$timeout) {
      function updateImage() {
          var img = 'snapshots/camera.jpg'+  '?decache=' + Math.random();
          console.log('Snapshot Loaded');
          $scope.snapshot = img;  
      };
  
      $scope.readSnapshot = updateImage;
  
      $scope.getSnapshot = function() {
          $http.get('/api/getSnapshot')
          .then(function(response) {
              // this callback will be called asynchronously
              // when the response is available
              console.log('Snapshot captured');
              $scope.readSnapshot();
          }, function(response) {
              console.log('Error in capturing...');
          }); 
      }
  
      $scope.intervalFunction = function() {
          $timeout(function() {
              $scope.getSnapshot();
              $scope.intervalFunction();
          }, 2000);
      };
  
      // Kick off the interval
      $scope.intervalFunction();
  });
  </code></pre>