Add new array to object when loading Angular

Question

Add new array to object when loading Angular

I have a download where you upload an image and it hides to the base 64 using angular-base64-upload .

I have an object in my controller where I send data to the endpoint, I need two things.

Base_image should be the base code of the image.
A new object that is created each time it is loaded.

Can someone please help me achieve this, thank you.

Summery

every time I add a new photo, I would like the post object array to add a new EG slot: slot_id: 1, slot_id: 2etc., and the image in the slot had its base64 code with the objectbase_image

var data = $.param({
                json: JSON.stringify({
                    c_name: $scope,
                    max_slots: $scope,
                    slots: [
                        {
                            slot_id: 1,
                            base_image: "base 64 image"
                        }
                    ]
                })
            });

HTML

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular Base64 Upload Demo</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

<div ng-controller="PostData">
    <strong>Campaign Name :</strong>
    {{items.c_name}}
    <br>
    <strong>Max Slots :</strong>
    {{items.max_slots}}

</div>

<div class="container" ng-controller="AddImage">
    <form name="form">
        <h3>Add Creatives</h3>
        <div class="input-group">
            <label for="file">Select Files</label>
            <span class="help-block">
          <ul>
            <li>required</li>
            <li>Maxsize = 600</li>
            <li>Accept = image</li>
            <li>Maximum = 5</li>
          </ul>
        </span>

            <input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*" maxsize="600" required maxnum ="5" on-change="onChange" onload="onLoad"
                   ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" required>

        </div>
        <div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
            form.files.$error:
            {{form.files.$error}}
        </div>
        <b>Model Value:</b>
        <table class="table table-bordered table-striped">
            <tr>
                <th>filename</th>
                <th>thumbnail</th>
                <th>filetype</th>
                <th>filesize (<i><small>KB</small></i>)</th>
                <th>base64</th>
            </tr>
            <tr ng-repeat="file in files">
                <td>{{file.filename}}</td>
                <td ng-repeat="step in stepsModel"><img class="thumb" ng-src="{{step}}"/></td>
                <td>{{file.filetype}}</td>
                <td>{{file.filesize / 1000}}</td>
                <td>{{file.base64.substring(0, 30)}}...</td>
            </tr>
            <tr>
                <td colspan="4" ng-show="files.length == 0">
                    <small><i>No file selected.</i></small>
                </td>
            </tr>
        </table>
    </form>
</div>

<form ng-submit="sendPost()">
    <button type="submit">Save</button>
</form>

</body>
</html>

Javascript

 angular.module('myApp', ['naif.base64'])

    .controller('PostData', function ($scope, $http) {
        $scope.items = {
            c_name: "Campaign name here",
            max_slots: 5,
            slots: [
                {
                    slot_id: 1,
                    base_image: "base 64 image"
                }
            ]
        };

        $scope.sendPost = function() {

            var data = $.param({
                json: JSON.stringify({
                    c_name: $scope,
                    max_slots: $scope,
                    slots: [
                        {
                            slot_id: 1,
                            base_image: "base 64 image"
                        }
                    ]
                })
            });

            $http.post("/echo/json/", data).success(function(res, status)  {
                $scope.items = res;
                console.log("$scope.items: ", $scope.items);
            }, function() { console.log("There is an error"); })
        }
    })


.controller('AddImage', function ($scope, $http, $window, $rootScope) {

        $scope.imageUpload = function (element) {
            var reader = new FileReader();
            reader.onload = $scope.imageIsLoaded;
            reader.readAsDataURL(element.files[0]);
        };

        $scope.imageIsLoaded = function (e) {
            $scope.$apply(function () {
                $scope.stepsModel.push(e.target.result);
            });

            $scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {

            };

            $scope.onChange = function (e, fileList) {

            };
        };

        var uploadedCount = 0;
        $scope.stepsModel = [];
    });