[AngularJS] NgTransclude et component

Bonjour, je développe une application avec angularJS pour apprendre a l'utiliser. Je rencontre actuellement un probléme avec les transclusion dans les component.

Ce que je veut faire c'est créer une liste d'éléments qui ce remplie en fonction d'un template, pour cela j'ai mon index.html qui utilise le component FileTree qui lui même utilise un autre component FileItem.

Voici le code :

Index.html - J'utilise mon component avec le template dedans

<div class="row" ng-if="pageMode == 'tools'">
    <div class="col-xs-12 col-md-10 col-md-offset-1">
        <file-tree cols="2" varname="item">
            <!-- Ceci fonctionne mais trés peut pratique  -->
            <div>File Name: {{$parent.$parent.$ctrl.name}}</div> 
            <!-- Ce que je voudrais faire  -->
            <div>File Name: {{item.name}}</div> 
        </file-tree>
    </div>
</div>

FileTree.template.html - Template du component FileTree

<button class="btn btn-success" ng-click="$ctrl.addItem()">Créer un élément</button>
<input type="text" class="form-control" ng-model="$ctrl.cols" ng-blur="$ctrl.changeCols()" />
<div class="ft-container">
    <div class="row text-center" ng-repeat="cols in $ctrl.data">
        <div class="col-xs-12 col-md-{{$ctrl.colsSelected}}" ng-repeat="item in cols">
            <file-item name="item.name" type="item.type" varname="{{$ctrl.varname}}">

                <div ng-transclude></div>
            </file-item>
        </div>
    </div>
</div>

FileTree.component.js - Controller du component FileTree

module.component('fileTree', {
    bindings: {
        url: '@',
        cols: '=',
        varname: '@'
    },
    transclude:true,
    controller: function($scope)
    {
        var self = this;
        var colsDefinition = {1:12, 2:6, 3:4, 4:3, 6:2, 12:1};

        let items = [
            {'name':'application', 'type':'folder'},
            {'name':'test.txt', 'type':'file'},
            {'name':'core', 'type':'folder'},
            {'name':'assets', 'type':'folder'},
            {'name':'readme.txt', 'type':'file'},
            {'name':'helper', 'type':'folder'},
            {'name':'libraries', 'type':'folder'},
        ];

        if(colsDefinition[this.cols] == null)
        {
            this.colsSelected = 12;
            this.cols = 1;
        }
        else
            this.colsSelected = colsDefinition[this.cols];

        let makeColumn = function(numCols, arrayData)
        {
            let result = [];
            let col = [];

            for(i = 0; i < arrayData.length; i++)
            {
                col.push(arrayData[i]);

                if(col.length % numCols == 0)
                {
                    result.push(col);
                    col = [];
                }
            }

            if(col.length > 0)
                result.push(col);

            console.log(result);

            return result;
        }

        self.addItem = function()
        {
            console.log('Add Item');
            items.push({'name':'New Item', 'type': 'file'});
            self.data = makeColumn(self.cols, items);
        }

        self.changeCols = function()
        {
            if(colsDefinition[self.cols] == null)
            {
                console.log("READ", self.cols);
                self.colsSelected = 12;
                self.cols = 1;
            }
            else
            {
                console.log('READ', self.cols, colsDefinition, colsDefinition[self.cols]);
                self.colsSelected = colsDefinition[self.cols];
            }
            self.data = makeColumn(self.cols, items);
            console.log(self.colsSelected)
        }
        this.data = makeColumn(this.cols, items);
    },
    template: $TEMPLATE
});

FileItem.template.html - Template FileItem

    <div class="ft-item" ng-class="{'ft-folder':$ctrl.type == 'folder', 'ft-file':$ctrl.type == 'file'}" ng-click="$ctrl.itemClick()">
        <div ng-transclude></div> {{$ctrl.name}}
    </div>

FileItem.component.js - Component FileItem

module.component('fileItem', 
{
    bindings: {
        name: '<',
        type: '<',
        varname: '@'
    },
    transclude:true,
    controller: function()
    {
        this.itemClick = function(item)
        {
        }
    },
    template: $TEMPLATE_item
})

Merci pour votre aide.