How to add ngAnimate to the UL and LI which is generated using ngRepeat?

I am working on animating ui->li which is generated using ngRepeat

I a working example in jquery here :

<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="http://ift.tt/1Gufy1b"></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

And I am trying to do same using angular js

angular example is here which is not working:

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

<script src="http://ift.tt/1KZVmfn"></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

I am not able to apply ngAnimate for UL/LI