angular component для дерева списки

category-list-tree.js

.controller('parentControll', function () {
  this.categoryData = {"selectedIdx": [], "finalCategory": {}};
})
/*----------------------------*/
.component('categoryList', {
    template: 
        '<ons-list>'+
        '<div ng-repeat="item in $ctrl.data | filter : $ctrl.filterSelected">'+
            '<ons-list-header>Заголовок {{ item.title }}</ons-list-header>'+
            '<ons-list-item tappable ng-click="$ctrl.toggleSelect(item)">{{ item.childs | json }} (уровень={{$ctrl.level}}) {{ $ctrl.selectedIdx | json }}</ons-list-item>'+
        '</div>'+
        '</ons-list>'+
        '<category-list ng-if="$ctrl.data[$ctrl.selected] && $ctrl.data[$ctrl.selected].childs && $ctrl.data[$ctrl.selected].childs.length > 0"  data-data="$ctrl.data[$ctrl.selected].childs" data-level="$ctrl.level+1" data-selected-idx="$ctrl.selectedIdx" data-final-category="$ctrl.finalCategory"></category-list>',
    bindings: {
        data: '<', // массив-данные потомков для уровня
        level: '<', // текущий уровень дерева 0,1,2.... по умочанию верний - нулевой
        //~ categoryData: '=' // {} внешние данные (нужен проброс) а именно:
            selectedIdx: '=', // двунаправленный массив предустановленных позиций списков [1,0,2] - выбрать вторую поз на 0 уровне, первую - на 1 уровне, третью на третьем уровне
            finalCategory: '=' // если дошел до вершины любой ветки - установить ее узел
    },
    controller: function () {
        var self = this;
        if (this.data === undefined) {
            this.data = [
                {title:"1", childs:[{title:"1.1", childs:[{title:"1.1.1", }, {title:"1.1.2"}]}, {title:"1.2"}]},
                {title:"2", childs:[{title:"2.1"}, {title:"2.2",  childs:[{title:"2.2.1", }, {title:"2.2.2"}]}]},
                {title:"3", childs:[{title:"3.1"}, {title:"3.2"}]},
                {title:"4"},
                {title:"5", childs:[{title:"5.1", childs:[{title:"5.1.1", childs:[{title:"5.1.1.1", }, {title:"5.1.1.2"}]}, {title:"5.1.2"}]}, {title:"5.2"}]},
            ];
        }
        
        if (this.level === undefined) this.level = 0;
        //~ if (this.categoryData.selectedIdx == undefined) this.categoryData.selectedIdx = [];
        if (this.selectedIdx == undefined) this.selectedIdx = [];
        //~ this.selectedIdx = this.categoryData.selectedIdx;
        
        this.selected = this.selectedIdx[this.level]; // индекс позиция на текущем уровне
      
        this.toggleSelect = function (item) {
            var idx = self.data.indexOf(item);
            self.selectedIdx[self.level] = idx;
            if (self.selected != undefined && self.selected == idx) {
                self.selected = null;
                self.selectedIdx = self.selectedIdx.splice(0, self.level);
                self.finalCategory = null;
                return;
            }
            self.selected =  idx;
            if ((!self.data[self.selected].childs) || self.data[self.selected].childs.length == 0) {// нет потомков - это финал в родительский контроллер
                self.finalCategory = self.data[self.selected];// item
            }
        };
        
        self.filterSelected = function(item, index, array) {
            if (self.selected == undefined || self.selected == index) return true;
            return false;
        };
    }
})

render.html

<div ng-controller="parentControll as ctrl">
  <category-list data-selected-idx="ctrl.categoryData.selectedIdx"
                 data-final-category="ctrl.categoryData.finalCategory">
  </category-list>
</div>