Programmatically invoke the browse dialog of input type=file using AngularJS

I want to have a separate span which invokes the "browse" button on an input type=file. In internet explorer it is not working,

Code is given below

HTML

<span class="edit-btn" data-ng-click="callFileControl()" ></span>

  <input style="dispaly:none" name="selectFileControl" id="selectFileControl" type="file"  
                    onchange="angular.element(this).scope().setFiles(this)" />

ANGULAR

$scope.callFileControl = function () {
        $("#selectFileControl").click();
    };

$scope.setFiles = function (element) {
        $scope.$apply(function ($scope) {
            // Turn the FileList object into an Array
            $scope.files = [];
            for (var i = 0; i < element.files.length; i++) {
                var sFileExtension = element.files[i].name.split('.')[element.files[i].name.split('.').length - 1];
                if (sFileExtension == "jpg" || sFileExtension == "jpeg" || sFileExtension == "png") {
                    $scope.files.push(element.files[i]);
                    $scope.uploadFile();
                }
            }
        });
    };

In IE 9 "element.files" is undefined. but in Mozilla it working as expected.

Is there any way to fix this?