<div ng-show="channelsTree.length > 0">
    <ul style="list-style:none;padding-left:0;">
        <li style="padding-left:18px;cursor:pointer;">
            <input id="selectAll" type="checkbox" ng-model="selectAll" ng-change="toggleAll();" />
            <label for="selectAll" style="margin-bottom:0;">{{'Select all' | translate}}</label>
        </li>
        <li ng-repeat="channel in channelsTree" wizdom-include="::'channelTree'"></li>
    </ul>
</div>

<script type="text/ng-template" id="channelTree">
    <div style="margin-bottom:5px;" class="channelItem">
        <span class="pointer" ng-class="channel.folderClass" ng-click="toggleChildren(channel)"></span>
        <span class="channelItem-common">
            <span class="ms-Icon ms-Icon--FolderHorizontal" ng-show="!channel.enabled && channel.childs.length > 0" ng-click="toggleChildren(channel)"></span>
            <input type="checkbox" checklist-model="selectedChannels" checklist-value="channel.source" ng-show="channel.enabled" ng-disabled="!channel.enabled" style="vertical-align:top;" />
            <span ng-click="selectItem(channel);" style="cursor:pointer">{{channel.name}}</span>
            <a style="cursor:pointer" ng-show="channel.childs.length > 0" ng-click="selectParentChannel(channel, null)">{{(channel.expandAll ? 'None' : 'All') | translate}}</a>
        </span>
    </div>
    <ul ng-if="channel.childs && channel.childrenVisible" style="list-style:none;padding-left:32px;">
        <li ng-repeat="channel in channel.childs" wizdom-include="'channelTree'"></li>
    </ul>
</script>