如何在Angular指令中移动DOM节点

Question

我选择了dropdown指令，看起来像bootsrap下拉列表，需要更改按钮的标题。

我有指令（进行中）：

return {
    restrict: 'E',
    require: '?ngModel',
    template: ['<div class="btn-group dropdown-button">',
               '  <div class="btn caption"></div>',
               '  <button class="btn dropdown-toggle" data-toggle="dropdown">',
               '    <span class="caret"></span>',
               '  </button>',
               '  <ul class="dropdown-menu" ng-transclude></ul>',
               '</div>'].join('\x0D'), // newline
    transclude: true,
    replace: true,
    link: function(scope, element, attrs, ngModelCtrl) {
        var selected_index = 0;
        if (ngModelCtrl) {
            element.on('click', 'ul li', function() {
                var value = $(this).attr('value');
                if (value) {
                    scope.$apply(function() {
                        ngModelCtrl.$setViewValue($interpolate(value)(scope));
                    });
                }
                selected_index = $(this).index();
                update();
            });
            ngModelCtrl.$viewChangeListeners.push(function() {
                scope.$eval(attrs.ngChange);
            });
            ngModelCtrl.$render = function() {
                element.find('ul li').each(function(i) {
                    var self = $(this);
                    var value = $interpolate(self.attr('value'))(scope);
                    if (value == ngModelCtrl.$modelValue) {
                        selected_index = i;
                        update();
                        return false;
                    }
                });
            };
        }
        var caption = element.find('.caption');
        function update() {
            caption.empty();
            element.find('ul li:eq(' + selected_index + ') a').clone().appendTo(caption);
        }
        update();
    }
}

它的使用方式如下：

    <dropdown ng-change="" ng-model="DropdownSelector">
        <li value="foo">
            <a>
                <toggle disabled="true"></toggle>
                <span>Toggle with Action button</span>
            </a>
        </li>
        <li>
            <a>
                <toggle disabled="true"></toggle>
                <span>Toggle with Action dropdown</span>
            </a>
        </li>
        <li>
            <a>
                <input type="checkbox" class="styled" disabled/>
                <label></label>
                <span>Checkbox only</span>
            </a>
        </li>
        <li>
            <a>
                <input type="checkbox" class="styled" disabled/>
                <label></label>
                <span>Checkbox and Text</span>
                <span>_____</span>
            </a>
        </li>
        <li><a>Text Only <span>_____</span></a></li>
    </dropdown>

我的问题是：如何将所选li的DOM节点移动到.caption？当我进行jQuery操作时，它不再是Angular，而且所有像ng-disable这样的角色都会停止工作。