jQuery file upload in combination with angularjs

I'm having trouble working with jQuery File upload & AngularJS. I have a multi step form like this:

<div ng-switch="step">
    <div ng-switch-when="1">
        <h1>Identity</h1>
        <form name="steponeForm" enctype="multipart/form-data" novalidate autocomplete="off">
            <input type="submit" ng-click="next(steponeForm.$valid)" value="next" /><br>

            <span class="button fileinput-button">
                <input type="file" id="fileupload" name="files[]" file-upload>
            </span>
            <button type="button" class="btn btn-primary start" data-ng-click="submit()">
                <span>Start upload</span>
            </button>

            <input ng-model="application.lastName" string-pattern required type="text" placeholder="{{ 'Last name'|translate }} *" name="appname" id="appname" />
            <div ng-show="steponeForm.$submitted || steponeForm.appname.$touched">
                <div class="error" ng-show="steponeForm.appname.$error.required">Last name is required.</div>
                <div class="error" ng-show="steponeForm.appname.$error.stringPattern">Doesn't look like a text.</div>
            </div>

            <input type="submit" ng-click="next(steponeForm.$valid)" value="next" />
        </form>
    </div>
    <div ng-switch-when="2">
        <h1>Studies</h1>
        <form name="steptwoForm" novalidate autocomplete="off">
            <input type="submit" ng-click="previous()" value="previous" />
            <input type="submit" ng-click="next(steptwoForm.$valid)" value="next" />

            <fieldset class="input-group">
                <legend translate>Lower secondary studies</legend>
                <em>Last obtained degree</em>

                <input ng-model="application.LowerSecondaryStudies.degreeTitle" type="text" placeholder="Degree Title" name="moreLowerSecondaryStudies-degreetitle" id="lwsappdegreetitle" />
                <input ng-model="application.LowerSecondaryStudies.educationAuthority" type="text" placeholder="Education authority" name="moreLowerSecondaryStudies-educationauthority" id="lwsappeducationauthority" />
                <input ng-model="application.LowerSecondaryStudies.graduationYear" style="padding: 0.5278em; width: 100%;" type="number" min="1960" max="2015" value="2015" placeholder="Graduation year" name="moreLowerSecondaryStudiesgraduationyear" id="lwsappgraduationyear" />
                <div ng-show="steptwoForm.$submitted || steptwoForm.moreLowerSecondaryStudiesgraduationyear.$touched">
                    <div class="error" ng-show="steptwoForm.moreLowerSecondaryStudiesgraduationyear.$error.number">Must be valid year.</div>
                </div>
            </fieldset>

            <input type="submit" ng-click="previous()" value="previous" />
            <input type="submit" ng-click="next(steptwoForm.$valid)" value="next" />
        </form>
    </div>
</div>  

As you can see I have an input field and a submit button to submit the file/image/... . Now I'm just trying to autoupload an image when they select one (later on I want to do this with a button). As you can see I also have a directive file-upload added to my input field.

This is my directive an jquery file upload code:

function file_upload() {
    return  {
        restrict: 'A',
        link: function(scope, element, attr) {
            jQuery('#fileupload').fileupload({
                add: function(e, data) {
                    var uploadErrors = [];
                    var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                    if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                        uploadErrors.push('Not an accepted file type');
                    }
                    if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                        uploadErrors.push('Filesize is too big');
                    }

                    if(uploadErrors.length > 0) {
                        alert(uploadErrors.join("\n"));
                    } else {
                        data.submit();
                    }
                },
                dataType: 'json',
                method: "POST",
                url: '/wp-content/plugins/dxs-vkgroup/includes/lib/upload.php',
                autoUpload: true,
                done: function (e, data) {
                    jQuery.each(data.result.files, function (index, file) {
                        /*$('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                         .appendTo('#div_files');*/
                        console.log(file.name);

                    });
                },
                fail: function (e, data) {
                    jQuery.each(data.messages, function (index, error) {
                        /*$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                         .appendTo('#div_files');*/
                        console.log(error);
                    });
                }
            });
        }
    };
}

In my upload.php file I do a dump like this:

var_dump($_FILES['upl']);
var_dump($_FILES['upl']['error']); die;

But they are both null. What am I missing?