Unable to get file size of a file from modal in Angular and Laravel

Question

I have a modal which asks the user to upload a file of any type. I also created its controller and put some error messages with if statements that checks the validity of a file. The problem is that, even if I try to upload a file exceeding 10MB, the error message that appears is

Please select a document first

The error message

The file size of the document you are trying to upload exceeds the 10MB limit

never shows up.

How do I fix it? I tried swapping the positions of the error messages but if I do that, all error messages will not show up regardless of the nature of the file being uploaded. Below are code fragments of my modal and controller.

<div class="col-md-6">
    <label for="name">Name:</label>
    <input type="text" class="form-control-sm" required ng-model="document.name" placeholder="Name of Document" style="width:200%"><br/><br/><br/>
    <form name="form">
        <input type="file"
               required ng-model="file"
               name="file"
               accept="file/*"
               ngf-select=""
               ngf-max-size="10MB" >
        <br/><br/>
        <a href="{{file.url}}">{{file.file_name}}</a>
        <button type="button"  class="btn btn-info btn-sm" ng-click="uploadDocument()">Upload</button>
    </form>
</div>

$scope.uploadDocument = function () {

    var data = {
        'file' : $scope.file
        ,'document' : $scope.document
    };

    $scope.document.company_id = $scope.employee.comp_fk;

    if(!$scope.document.name){
        swal({
            title: "Please enter document name.",
            type: "warning"
        });
    }
    else if(!$scope.file){
        swal({
            title: "Please select a document first.",
            type: "warning"
        });
    }
    else if($scope.file.size > 10485760) {
        swal({
            title: "The file size of the document you are trying to upload exceeds the 10MB limit.",
            type: "warning"
        });
    }
    else {
        Documents.uploadDocument(data).then(function (response) {

            var data = response.data;
            var success = data.success;

            $scope.loading = false;
            if (success) {
                $scope.document=data.document;
                $scope.success = true;
                swal({
                    title: "Document Saved!",
                    text: "Document successfully saved.",
                    type: "success"
                })
            }else{
                swal({
                        title: "Server Error!",
                        text: "Saving not successful. Kindly retry",
                        type: "error"
                    },
                    function(){
                        $scope.closeModal();
                        $route.reload();
                    })
            }
            $scope.files = {};
        });
    }
};