Как добавить ngAnimate в UL и LI, которые генерируются с помощью ngRepeat?

Question

Я работаю над анимацией пользовательского интерфейса, который генерируется с помощью ngRepeat

Я рабочий пример в jquery здесь:

<div class="accordion-wrapper">
    <ul class="accordion-root">
        <li class="accordion-key">
            <div class="accordion-group-header">item 1</div>
            <ul class="accordion-group">
                <li class="accordion-key">
                    <div class="accordion-group-header">sub item 1</div>
                    <ul class="accordion-group">
                        <li>tertiary item 1</li>
                        <li>tertiary item 2</li>
                        <li>tertiary item 3</li>
                        <li>tertiary item 4</li>
                        <li>tertiary item 5</li>
                        <li>tertiary item 6</li>
                    </ul>
                </li>
                <li>sub item 2</li>
                <li>sub item 3</li>
                <li>sub item 4</li>
                <li>sub item 5</li>
            </ul>
        </li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>





<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">

    $(function() {

        //  initialize accordion by hiding all branches
        $('.accordion-wrapper .accordion-group').hide()

    /*  ** Work-around for <UL> and <LI> elements not having full-width hit-areas for hover and click actions **

           wrap all text items inside accordion with highlight and backlight to enable full-width item selection
          .highlight is placed above the text item in the DOM and .backlight is placed below the text item
          .highlight accepts all hover and click actions and turns the item's .backlight ON or OFF. */
        $('.accordion-wrapper li:not(.accordion-key), .accordion-group-header')
            .prepend('<div class="accordion-item-highlight"></div>')
            .append('<div class="accordion-item-backlight"></div>')


    /*  item DOM: 
        <li>
            <div class="accordion-item-highlight"></div>
            item text
            <div class="accordion-item-backlight"></div>
        </li> */


        $('.accordion-group-header .accordion-item-highlight').on('click', function(e) {
                if(this == e.target) {
                    $(this).closest('.accordion-key').children('.accordion-group').toggle('fast')
                }
            })

    })

</script>

plnkr

И я пытаюсь сделать то же самое, используя угловой JS

Здесь приведен угловой пример, который не работает:

<accordion-group group=tree domains=nets.data.domains></accordion-group>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<script type="text/javascript">
    angular.module('accordion', ['ngAnimate'])
        .controller('main', ['$scope', function($scope){
            $scope.nets =   {
                                "data": {
                                    "symbols": {},
                                    "domains": {
                                        "Root": [
                                            "GR_5",
                                            "SIM069081008:Root",
                                            "SIM069081001:Root",
                                            "SIM069081012:Root"
                                          ],
                                        "GR_5": [
                                            "SIM069081001:GR_5",
                                            "SIM069081004:GR_5"
                                          ],
                                          "MyNetwork": ["Root"]
                                    },
                                    homeGroup: "MyNetwork"
                                }
                            }

            var treeRootName = $scope.nets.data.domains[$scope.nets.data.homeGroup][0]
            $scope.tree = $scope.nets.data.domains[treeRootName]


            // if array item is a node, print it out using template else build out it's children into the next layer by passing $scope.domains.<domain-name> as the source for the next level of accordion-group                
        }])
        .directive('accordionGroup', function() {
            return {
                restrict: 'E',
                replace: true,
                scope: { group: '=', domains: '=' },
                template: ' <ul class="repeat" ng-class="repeat" ng-animate="{enter: \'repeat-enter\',leave: \'repeat-leave\',move: \'repeat-move\'}">                                                                  \
                                <accordion-key class="accordion-key" ng-repeat="key in group" key=key domains=domains ng-click="toggle($event, key)"></accordion-key>           \
                            </ul>',
                link: function(scope, element, attrs) {

                    scope.group = scope.group.map(function(key) {return {name: key} })

                    angular.forEach(scope.group, function(key) {
                        if(key.name.indexOf('SIM') == -1) {
                            console.log('setting collapse', key)
                            key.collapsed = true
                            console.log('collapse set complete', key)
                        }
                    })

                    scope.toggle = function($event, key) {
                        $event.stopPropagation()
                        key.collapsed = !key.collapsed
                    }
                }
            }
        })
        .directive('accordionKey', function($compile, $rootScope) {
            return {
                restrict: 'E',
                replace: true,
                scope: {key: '=', domains: '='},
                template: '<li >{{key.name}}</li>',
                link: function(scope, element, attrs) {
                        if(scope.key.name.indexOf('SIM') == -1) {
                            // console.log(scope.key.name, scope.key.collapsed)
                            $compile('<accordion-group class="accordion-group" group=domains[key.name] domains=domains ng-show=!key.collapsed></accordion-group>')(scope, function(cloned, scope) {
                                element.append(cloned)
                            })  
                        }
                }
            }
        })
</script>

code plnkr

Я не могу применить ngAnimate для UL/LI