Javascript 带有ng repeat的嵌套指令会导致奇怪的行为

假设我有两个指令：外部指令和内部指令。在第一个指令中，我有一些数据，我想插入第二个指令，其中包含ng repeat。所以我的指令看起来像：

outer.js

directive('outer', function($compile) {
    return {
        restrict: 'E',
        template: '<div class="options"></div>',
        scope: true,
        bindToController: {
            options: '='
        },
        link: function(scope, element) {
            var list = $(element).find('.options');
            // Here we dynamically insert html for second directive
            $('<inner><span ng-bind="$select.getValue(item)"></span></inner>').appendTo(list);
            $compile(list.contents())(scope);
        },
        controllerAs: '$select',
        controller: function($rootScope) {
            this.items = ['aaa', 'bbb'];

            this.getValue = function(item) {
                $rootScope.log += '\n' + item;
                return item;
            };
        }
    };
}

directive('second', function($compile) {
    return {
        restrict: 'E',
        require: '^first',
        replace: true,
        transclude: true,
        template: '<ul><li><span></span></li></ul>',
        link: function(scope, element, attrs, $select, transclude) {
            var choices = $(element.find('li')[0]);
            choices.attr('ng-repeat', 'item in $select.items');

            var inner = $(choices.find('span')[0]);
            transclude(scope, function(clone) {
                inner.append(clone);
            });
            $compile(choices)(scope);
        }
    };
});