ng-change is not triggered (used along with a directive)

Question

I have the following html code

<input type="file" ng-model="Import" file-reader="fileContent" ng-change="getList();"/>

As shown above, i am trying to load a text file and get it contents on ng-change.

Here is the directive 'fileReader'

ngUtilityMod.directive('fileReader', function () {
return {
    scope: {
        fileReader: "="
    },
    link: function (scope, element) {
        $(element).on('change', function (changeEvent) {
            var r = new FileReader();
            var CSVfile;
            var checkCSV = changeEvent.target.files[0].name;
            checkCSV = checkCSV.slice(-4);
            if (checkCSV === '.csv') {
                CSVfile = true;
            }
            else { CSVfile = false; }
            if (changeEvent.target.files[0].type === 'text/plain' || CSVfile === true) {
            var files = changeEvent.target.files;
            if (files.length) {

                r.onload = function (e) {
                    var contents = e.target.result;
                    scope.$apply(function () {
                        scope.fileReader = contents;
                    });
                };
                r.readAsText(files[0]);
            }
            }
            else {
                'data';
            }


        });
    }
};

});

When ng-change is triggered, i should be able to get to below function. The issue here is that ng-change is not getting triggered at all. If i use ng-click or any other angularjs events, it is able to detect. Can someone please let me know why i am unable to trigger ng-change here

    $scope.getList = function () {
    $scope.getImport = function (fileContent) {
    } // function to load CSV data during import feature.

    if (angular.isDefined($scope.fileContent)) {
        $scope.Import = $scope.fileContent;
        console.log($scope.params);
    }

};