AngularJS: upload file inside modal-ui-bootstrap

I have an angular modal-ui, in it I upload file. The problem is that for some reason the <input> of the file doesn't triggers the app directive. The directive returns the file name and size when the <input> being changed.

this is the result I want to get:
example

I really tried already any thing, but still for some reason I can't see in the <span> the file name.

The html file :

<form novalidate ng-submit="add(Form.$valid)" name="Form">
    <div class="modal-header col-lg-12">
        <h3 class="col-lg-4 col-lg-offset-4">add file</h3>
    </div>
    <div class="modal-body">
        <div class="panel-body">
            <div class="row">
                <div class="form-group col-lg-8" ng-class="{'has-error': notPass && Form.fileName.$invalid}">
                    <label class="control-label label-add-card" for="fileName">name</label>
                    <input class="input-add-card form-control " id="fileName" name="fileName" type="text"  ng-model="fileName" ng-pattern="/^[a-z1-9]{10,}$/" ng-required="true">
                    <p ng-show="notPass && Form.fileName.$invalid" class="help-block">not good</p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-lg-8" ng-class="{'has-error':notPass && Form.fileExplain.$invalid}">
                    <label class="control-label label-add-card" for="fileExplain">explain</label>
                    <textarea class="input-big form-control " id="fileExplain" name="fileExplain" type="text"  ng-model="fileExplain" ng-pattern="/^[a-z1-9]{1,}$/" ng-required="true"></textarea>
                    <p ng-show="notPass && Form.fileExplain.$invalid" class="help-block">not good</p>
                </div>
            </div>
            <div>
                <div class="form-group col-lg-12" ng-class="{'has-error':notPass && Form.uploadDownloads.$invalid}">

                    <input  ng-model="uploadDownloads" type="file" fd-input file-name="fileName" />
                    <input  class="btn btn-primary" type="button" value="choose" onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
                    <span class="badge badge-important">{{fileName}}</span>
                    <p ng-show="notPass && Form.uploadDownloads.$invalid" class="help-block">please choose</p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success col-lg-12 btn-modal-costume">add</button>
    </div>
</form> 

the modal controller:

/**
 * Created by Ariel on 22/11/2015.
 */
app.controller('uploadDownloadsController',function($scope,$modalInstance ){
    app.directive('fdInput', fdInput);
    function fdInput() {
        return {
            scope: {
                fileName: '='
            },
            link: function(scope, element, attrs) {
                element.on('change', function(evt) {
                    var files = evt.target.files;
                    console.log(files[0].name);
                    console.log(files[0].size);

                    scope.fileName = files[0].name;
                    scope.$apply();
                });
            }
        }
    };
    $scope.fileName = '';

    $scope.add = function(valid){
        if(valid){
                $scope.data = 'none';
                var f = document.getElementById('uploadDownloads').files[0];
                var r = new FileReader();
                r.onloadend = function(e){
                    $scope.data = e.target.result;
                    $scope.notPass = false;
                    $modalInstance.close({
                        'data':$scope.data,
                        'fileName':$scope.fileName,
                        'fileExplain':$scope.fileExplain
                    });
                };
            /*activate the onloadend to catch the file*/
                r.readAsBinaryString(f);
        } else {
            $scope.notPass = true;
        }
    };
    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
});