ngDialog弹出的窗口中指令为什么获取不到HTML节点

在index.html页面中有一个按钮，点击该按钮弹出窗口，弹出代码如下

 ngDialog.open({ template:'road_add.html', controller:"addVertiController", data:{ title: '添加信息', submittype:"新增" } });

index.html页面引用了

 <script type="text/javascript" src="statics/js/directives/angular-upload.js"></script>

弹出的road_add.html代码片段如下

 ...
<div class="form-group">
    <label class="col-xs-2 control-label">图纸</label>
    <div class="col-xs-10"><file-upload action="upload.php" name="file" multiple="false" ng-model="files"></file-upload></div>
</div>

angular-upload.js代码如下

 angular.module('my-angular-upload', [])
.directive('fileUpload', [function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<div class="file-angular-upload"><div class="form-control file-preview">{{filename}}</div><div class="file-btn"><span>Browse...<input type="file"/></span></div></div>',
        replace: true,
        link: function (scope, ele, attrs, ctrl) {
            //必要属性检测
            if (!attrs.action) {
                throw new Error('请设置上传action');
            }
            //初始化
            var file = angular.element(document.querySelector('.file-angular-upload>.file-btn> input[type="file"]'));console.log(file.length);
            var files = [];
            attrs.accept && file.attr('accept', attrs.accept);
            attrs.multiple && file.attr('multiple', attrs.multiple);
            file.bind("change", function (e) {
                scope.$apply(function () {
                    scope.queue = [];
                    for (var i in e.target.files) {
                        if (/^\d+$/.test(i)) {
                            scope.queue.push(e.target.files[i]);
                        }
                    }
                });
            });
        }
    }
}])

点击按钮弹出窗口，console出来的结果是0，获取不到该节点，但是如果把直接放到index.html页面，console的结果就是1。

我怎么才能在弹出窗口中从指令中获得file节点呢