AngularJS: Add base64 image to array

Question

I have a image upload that validates the image in my controller, I then with for the user to click to add the image, if the user then uploads a new image and adds image to the array to show the propitious image and the new image.

Currently if i upload a new image it'll change the image in the array.

is there a simple way to alter my code to fix this ?

Summery

So just to clarify, When I click Add Image I wish to add the current image to the array, when i upload new image and add image i wish to add the new image to the array and keeping the original image.

Currently If i add new image it over rights the array.

Please See Fiddle

HTML

 <div ng-controller="UpLoadImage">

    <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    <label for="file">Select File</label>
    <input ng-model="file" type='file' ng-model-instant name='file' id='fileinput'
           accept='image/*' onchange='angular.element(this).scope().first(this)'/>

    {{uploadError}}

    <button ng-click="addImage()">Add image</button>
    <div ng-repeat="creative in creative">
        <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
    </div>


</div>

JavaScript

angular.module('myApp', [])

.controller('UpLoadImage', function ($scope, $http, $timeout) {
    $scope.preview = 'img/download.png';
    $scope.first =function(){
        console.log('we are here');
        input = document.getElementById('fileinput');
        file = input.files[0];
        size = file.size;
        if(size < 650000){
            var fr = new FileReader;
            fr.onload = function(e){
                var img = new Image;

                img.onload = function(){
                    var width = img.width;
                    var height = img.height;
                    if(width == 1920 && height == 1080){
                        console.log(e.target.result);
                        $scope.preview = e.target.result;
                        window.alert("perfect");
                        $scope.$apply();

                    }else{
                        window.alert("incorrect definitions");
                       console.log(width,height);
                        $scope.$apply();
                    }
                };
                img.src = fr.result;
            };

            fr.readAsDataURL(file);
        }else{
            window.alert("to big");
            console.log('file size to big')

        }

    };

        $scope.foo = "base64 image here";
        $scope.creative = [];

        $scope.addImage = function () {
            $scope.creative.push($scope.creative.length);
        };
});

Answer 1

In the end i wrote it differently

HTML

<div ng-controller="UpLoadImage">

<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image">
<label for="file">Select File</label>
<input ng-model="file" type='file' ng-model-instant name='file' id='fileinput'
       accept='image/*' onchange='angular.element(this).scope().first(this)'/>

{{uploadError}}

<button ng-click="addImage()">Add image</button>
<div ng-repeat="slot in slots">
    <img style="height: 100px; width: 100px" ng-src="{{slot.image}}" alt="preview image">
</div>

JavaScript

angular.module('myApp', [])

.controller('UpLoadImage', function ($scope, $http, $timeout) {


    $scope.preview = 'img/download.png';
    $scope.slots=[];
    $scope.maxSlots = 5; // this dynamic

    $scope.first =function(){
        console.log('we are here');
        input = document.getElementById('fileinput');
        file = input.files[0];
        size = file.size;
        if(size < 650000){
            var fr = new FileReader;
            fr.onload = function(e){
                var img = new Image;

                img.onload = function(){
                    var width = img.width;
                    var height = img.height;
                    if(width == 1920 && height == 1080){
                        console.log(e.target.result);
                        $scope.preview = e.target.result;
                        window.alert("perfect");
                        $scope.$apply();

                    }else{
                        window.alert("incorrect definitions");
                        console.log(width,height);
                        $scope.$apply();
                    }
                };
                img.src = fr.result;
            };

            fr.readAsDataURL(file);
        }else{
            window.alert("to big");
            console.log('file size to big')

        }
    };

    $scope.foo = "base64 image here";


    $scope.addImage = function () {
        if($scope.slots.length < $scope.maxSlots){
            $scope.slots.push({"image":$scope.preview});

        }else{
            window.alert("you have to delete a slot to generate a new one");
            console.log('you have to delete a slot to generate a new one')
        }
    };
});