title: Angular 1.x image upload preview code not updating DOM
body: <p>Using Angular 1.x I want to provide a drag and drop box for uploading images. When the images have been dropped I want to show a preview in the front end.</p>
  
  <p>This is my code:</p>
  
  <pre><code>dropbox.addEventListener("drop", function(evt) {
  
          evt.stopPropagation();
          evt.preventDefault();
  
          $scope.$apply(function(){
              $scope.dropText = 'Drop files here...';
              $scope.dropClass = '';
          });
  
          var files = evt.dataTransfer.files;
  
          if (files.length &gt; 0) {
  
                  $scope.listing.listing_images = [];
                  $scope.imagepreview = [];
  
                  for (var i = 0; i &lt; files.length; i++) {
                      // push the image to be uploaded 
                      $scope.listing.listing_images.push(files[i]);
  
                      // push the image to be rendered
                      var reader = new FileReader();
  
                      reader.onload = function (e) {
                          $scope.imagepreview[i] = e.target.result;              
                      }
                      reader.readAsDataURL(files[i]);
                  }
  
                  console.log($scope.imagepreview);
                  console.log($scope.imagepreview.length);
  
          }
      }, false);
  </code></pre>
  
  <p>If I drop say 3 images into the dropbox area and I console.log $scope.imagepreview I can see that the image is stored - so far so good!</p>
  
  <pre><code>[]
  0: "data:image/jpeg;base64,/9j/4fzyRXhpZgAATU0AKgAAAAg"
  1: "data:image/jpeg;base64,/9j/4f8ERXhpZgAATU0AKgAAAAg"
  2: "data:image/jpeg;base64,/9j/4f+eRXhpZgAATU0AKgAAAAg"
  length: 3
  __proto__: Array(0)
  </code></pre>
  
  <p>Then on the very next line:</p>
  
  <pre><code>$scope.imagepreview.length 0
  </code></pre>
  
  <p>This makes no sense and looks like a bug to me, how can Scope object have data but also have a length of 0?</p>
  
  <p>The problem is that in my template when I try to ng-repeat on the $scope.previewimages the object is empty so no images are rendered. Any ideas?</p>