Way to bind data from parent scope to element in node in angular tree control?

Question

Working on adding a drag and drop functionality to angular-tree-control: https://github.com/wix/angular-tree-control

I am trying to bind data from the parent scope to an element I have made in the template for each node. However, the node's isolated scope makes it difficult to pass down this information. I have added an attribute through the isolated scope definition (scope: {files: "="}) and set files in my html. Nonetheless, when I used ng-model="files" the data does not change or the change does not reach the main scope.

It cannot be that I cannot view the change. A watch trigger from another angular application (ng-file-upload) is supposed to go off and call an upload file function when I change the main (not the isolated) scope data from the client, and that does not happen. If the data is correctly binded from the parent scope the watch function should be triggered because the parent scope property should change when the local scope property changes. I can add further explanation or clarification if this is not enough.

Here is my HTML code:

<div treecontrol class="tree-classic"
     tree-model="dataForTheTree"
     files="files"
     options="treeOptions"
     on-selection="showSelected(node)"
     selected-node="node1">
    <span ngf-drop ngf-select ng-model="files" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"> 
 {{node.ObjectName}} &nbsp;&nbsp; {{node.FileSize}} {{files}} </span> 
</div>

Here is my Javascript:

$scope.getserver = function () {
    // Simple POST request example (passing data) :
    $http.post('/api/tree/download', { "Url": "" }).
      success(function (data, status, headers, config) {
          // this callback will be called asynchronously
          // when the response is available
          $scope.dataForTheTree = JSON.parse(JSON.stringify(data));
          $scope.log += JSON.stringify(data);
      }).
      error(function (data, status, headers, config) {
          $scope.log += "error getting file structure";
          // called asynchronously if an error occurs
          // or server returns response with an error status.
      });
}
$scope.$watch('files', function () {
    $scope.upload($scope.files);
});

$scope.upload = function (files) {
    // upload code goes here
}

Here are my edits to angular-tree-control.js:

scope: {
                treeModel: "=",
                selectedNode: "=?",
                selectedNodes: "=?",
                expandedNodes: "=?",
                onSelection: "&",
                onNodeToggle: "&",
                options: "=?",
                orderBy: "@",
                reverseOrder: "@",
                filterExpression: "=?",
                filterComparator: "=?",
                done: "&",
                //this is my edit
                files: "="
            }

Answer 1

I pulled it off with an easy trick. You don't need to make a new attribute to pass data down to the directive. Therefore, files is not necessary. Just change ng-model="files" in your html to ng-model="$parent.files". Its a problem with ng-repeat creating an isolated scope for each node, not with angular-tree-control.js (although the directive likely uses the scope for each node rather than the parent one).