Directives are overwriting each other

I have two directives, one checks the size of the file, while the other one ensures that the user is uploading a valid file format. They are both assigned to a input=file element, and seperate they work, but together, the validFileSize directive seems to cause the selectNgValidationFiles to not work.

//view

<input type="file" name="uploadedDocs" id="uploadedDocs" data-ng-model="fileStore.file" select-ng-validation-files valid-file-size multiple>

//controller

function validFileSize($parse){

    return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, el, attrs, ngModel) {

            var model = $parse(attrs.ngModel);
            var modelSetter = model.assign;
            var maxSize = 2000; //2000 B
            el.bind('change', function() {

                scope.$apply(function() {
                    scope.fileStore.maxSizeError = false;
                    if (el[0].files.length > 1) {
                        modelSetter(scope, el[0].files);
                    } else {
                        modelSetter(scope, el[0].files[0]);
                    }

                    if(el[0].files.length > 0) {
                        var fileSize = el[0].files[0].size;
                        if (fileSize === 0) {
                           scope.fileStore.maxSizeError = true;
                        }
                    }
                    
                });
            });
        }

    }
}

function selectNgValidationFiles() { //if files to be uploaded vary in future, add condition to check type or create new directive
    return {
        require: "ngModel",
        link: function postLink(scope,elem,attrs,ngModel) {
            var validFormats = ['pdf', 'PDF', 'doc', 'DOC', 'docx', 'DOCX', 'jpg', 'JPG', 'jpeg', 'JPEG','png', 'PNG', 'gif', 'GIF', 'pptx', 'PPTX', 'csv', 'CSV', 'xlsx', 'XLSX', 'zip', 'ZIP'];
            elem.bind('change', function () {
                validFile(false);
                scope.$apply(function () {
                    ngModel.$render();
                });
            });
            ngModel.$render = function () {
                console.log('elem : ',elem)
                ngModel.$setViewValue(elem[0].files[0]);
            };
            function validFile(bool) {
                ngModel.$setValidity('pdfIncorrect', bool);
            }
            ngModel.$parsers.push(function(value) {
                var ext = value.name.substr(value.name.lastIndexOf('.')+1);
                if(ext=='') return;
                if(validFormats.indexOf(ext) == -1){
                    console.log('not valid format')
                    return value;
                }
                validFile(true);
                return value;
            });
        }
    }
};

question

What is causing my directives to break one another? I assume one is overwriting the other somehow but I can't work out how to fix it.