添加可折叠面板时不再调用angularjs指令

Question

我有一个简单的文件上传页面，它使用angularjs和bootstrap CSS。

html：

<div ng-app="myApp" ng-controller="DocumentCtrl">
    <div id="upload">    
        <div class="row">
            <div class="col-sm-2">
                <input type="file" file-model="myFile"/>
            </div>
            <div class="col-sm-2">
                <button ng-click="uploadFile()">Upload document</button>
            </div>
        </div>
    </div>  
</div>

剧本：

angular.module('myApp')
  .controller('DocumentCtrl', ['$scope', 
     '$window', '$location', '$http', function($scope, $window, $location, $http) {

$scope.uploadFile = function(){
    var file = $scope.myFile;
    ......
    })
    .success(function(response){
        console.log(response);
        $window.location.reload();
    })
    .error(function(error){
        console.log(error);
    });
};    
}])
.directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        console.log('in fileModel directive');
        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

问题：当我将输入节包装到collapsible-panel时，不再调用fileModel指令，并且$ scope.myFile未定义。 没有可折叠面板元素，一切都像魅力一样。

<div ng-app="myApp" ng-controller="DocumentCtrl">
    <div id="upload">    
      <collapsible-panel>
        <div class="row">
            <div class="col-sm-2">
                <input type="file" file-model="myFile"/>
            </div>
            <div class="col-sm-2">
                <button ng-click="uploadFile()">Upload document</button>
            </div>
        </div>
      </collapsible-panel>
    </div>  
</div>

为什么会这样？我需要做些什么来包装＆＃39; div id-upload＆＃39;或者＆＃39; div class =＆＃34; row＆＃34;＆＃39;进入＆＃39; collapsible-element＆＃39;？