JS Controller code: $scope.fileReader = new FileReader();$scope.fileReader.onload = function () { $scope.CurrentItem.images[$scope.CurrentItem.images.length - 1].base64 = this.result; $scope.selectedImage.base64 = this.result; };$scope.UploadFile = function (item, file) { if (file != null && file != "") { $scope.error = '';$scope.CurrentItem = item; // Validation Logic here removed if (valid) { $scope.selectedImage = {};$scope.selectedImage = { 'size': file.size, 'type': file.type, 'name': file.name, 'file': file }; $scope.CurrentItem.images.push($scope.selectedImage); \$scope.fileReader.readAsDataURL(file); } else { // Handle Validation Failure } } } On IOS 11, the image is successfully added to the array, an element for the image added to the page, and the red X for the delete operation is positioned correctly on it. However, the actual image preview does not appear. However, if you change the orientation of the iPad from Portrait to Landscape or vice versa, it seems like some refresh is invoked on orientation change and the image preview fills in. On IOS 10 and below, as well as on desktop browsers (including Safari 11 on OSX), this just renders the image out at the same time as the element is added to the page as intended. Anyone have any ideas?