title: Error while testing image source on load in angular
body: <pre><code>&lt;div class="col-xs-4 col-sm-4 col-md-4"&gt;
      {{jsonData[current].profilepic}}
      &lt;div ng-if=IsValidImageUrl(jsonData[current].profilepic)&gt;
          &lt;img id="pic" ng-src="{{jsonData[current].profilepic}}"  alt=""/&gt;
      &lt;/div&gt;
      &lt;div ng-if=!IsValidImageUrl(jsonData[current].profilepic)&gt;
          &lt;div id="pic" class="letter"&gt;
              &lt;div class="circle"&gt;{{jsonData[current].firstName.charAt(1)+jsonData[current].lastName.charAt(1)}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>app.controller('task1Controller',['$scope', 'taskFactory', '$state', 'imageTestService', function($scope, taskFactory, $state, imageTestService){
  
      $scope.taskData = {};
      $scope.current = 0;
  
      taskFactory.get().then(function(response){
          $scope.jsonData = response.data.data.resultCareGivers;
      });
  
      $scope.IsValidImageUrl = function(url){        
          return imageTestService.IsValidImageUrl(url); //Error here
      };
  
      $scope.viewDetails = function(){
          $state.go('view-details', {details: $scope.jsonData[$scope.current]});
      };
  
  
      $scope.back = function(){
          $scope.current = ($scope.current !== 0 ? $scope.current - 1 : 0);
      };
  
      $scope.next = function(){
          $scope.current = ($scope.current !== $scope.jsonData.length-1 ? $scope.current + 1 : $scope.jsonData.length-1);
      };
  
  }]);
  </code></pre>
  
  <p>image test service:</p>
  
  <pre><code>app.service('imageTestService', function($q){
  
      this.IsValidImageUrl = function(url){
          var deferred = $q.defer();
          if(url != null &amp;&amp; url != ""){
              var img = new Image();
              img.onerror = function() { deferred.resolve(false); };
              img.onload =  function() { deferred.resolve(true); };
              img.src = url;
              return deferred.promise;
          }
      };
  
  });
  </code></pre>
  
  <p>Error stack in console:</p>
  
  <p><a href="http://Error%20link" rel="nofollow noreferrer">Error link</a></p>
  
  <blockquote>
    <p>10 $digest() iterations reached. Aborting!
        Watchers fired in the last 5 iterations: [[{"msg":"IsValidImageUrl(jsonData[current].profilepic)","newVal":{"$$state":{"status":0}},"oldVal":{"$$state":{"status":0}}}],[{"msg":"IsValidImageUrl(jsonData[current].profilepic)","newVal":{"$$state":{"status":0}},"oldVal":{"$$state":{"status":0}}}],[{"msg":"IsValidImageUrl(jsonData[current].profilepic)","newVal":{"$$state":{"status":0}},"oldVal":{"$$state":{"status":0}}}],[{"msg":"IsValidImageUrl(jsonData[current].profilepic)","newVal":{"$$state":{"status":0}},"oldVal":{"$$state":{"status":0}}}],[{"msg":"IsValidImageUrl(jsonData[current].profilepic)","newVal":{"$$state":{"status":0}},"oldVal":{"$$state":{"status":0}}}]]</p>
  </blockquote>
  
  <p>Update 2:</p>
  
  <pre><code>app.service('imageTestService', function(){
  
      this.IsValidImageUrl = function(url){
          var result = {};
          if(url != null &amp;&amp; url != ""){
              var img = new Image();
              img.onerror = function() { result.val = true };
              img.onload =  function() { result.val = false };
              return result;
          }
      };
  });
  </code></pre>
  
  <p>but still the same error in console.</p>
  
  <p>Update 3:</p>
  
  <pre><code>app.service('imageTestService', function(){
  
      this.IsValidImageUrl = function(url){
          var result = {
              val :false
          };
          this.img = new Image();
          this.img.onabort = function() { result.val = false };
          this.img.onerror = function() { result.val = false };
          this.img.onload =  function() { result.val = true };
          return result.val;
      };
  });
  </code></pre>
  
  <p>In update 3, doesn't matter what I do, always <code>image.onabort()</code> is called.</p>
  
  <p>It throws error <code>fails to load resource</code> at the function call itself:</p>
  
  <pre><code>$scope.IsValidImageUrl = function(url){    //Failed to load resource error    
     return imageTestService.IsValidImageUrl(url); 
  };
  </code></pre>