Перемещение элементов angularJS, созданных ng-repeat

Я пытаюсь переместить элементы, созданные ng-repeat, в некоторые столбцы. Я успешно сделал это с помощью директивы, но проблема возникает, когда я сортирую массив объектов, над которыми работает ng-repeat. Директива, которая ищет наименьший столбец, а затем вставляет в него элемент, не может определить наименьший столбец (возможно, потому, что в столбцах все еще есть элементы). Я считаю, что структура, которую я использую (директивы/контроллеры и т. д.), не оптимальна, и я не могу найти, как организовать угловой код, чтобы получить желаемое поведение.

Вот jsFiddle, показывающий, что у меня есть сейчас: http://jsfiddle.net/kytXy/6/ Вы можете видеть, что элементы правильно вставляются в столбцы. Если нажать на кнопку, которая переставляет сортировку, то они снова не вставляются. Если вы нажмете несколько раз на одну и ту же кнопку, посмотрите, что произойдет... Я добавляю оповещения с комментариями, которые вы можете раскомментировать, чтобы вы могли видеть, как элементы вставляются и что не так. Я также пытался очистить столбцы перед повторной вставкой (прокомментировал js в jsfiddle), но безуспешно.

Вот код: HTML:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div ng-app="myModule">
    <div ng-controller="Ctrl" >
        <button ng-click="predicate = 'id'; reverse=false; setupColumns()">Sort ID</button>
        <button ng-click="predicate = 'id'; reverse=true; setupColumns()">Sort ID reversed</button>
        <div id="columns" generate-sub-columns post-render>
        </div>
        <div class="elements">
            Elements are stored here !
        <div class="element" ng-repeat="(key,elt) in elts | orderBy:predicate:reverse" id="element{{key}}">
           Text: {{elt.a}}
        </div>
        </div>
    </div>
</div>

JS:

var myModule = angular.module('myModule', []);

myModule.controller('Ctrl', function($scope) {
    $scope.predicate='id';
    $scope.reverse=false;

    $scope.elts = [
        {id:0,a:"Hi man !"},
        {id:1,a:"This is some text"},
        {id:2,a:"Wanted to say hello."},
        {id:3,a:"Hello World!"},
        {id:4,a:"I love potatoes :)"},
        {id:5,a:"Don't know what to say now. Maybe I'll just put some long text"},
        {id:6,a:"Example"},
        {id:7,a:"Example2"},
        {id:8,a:"Example3"},
        {id:9,a:"Example4"},
        {id:10,a:"Example5"},
        {id:11,a:"Example6"}
    ];

    $scope.setupColumns = function() {
        console.log('calling setupColumns');
        var eltIndex = 0;
        var element = jQuery("#element0");
        /*while(element.length > 0) {
            jQuery('#elements').append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            alert(1);
        }
        alert('Columns should be empty');*/
        element = jQuery("#element0");
        eltIndex = 0;
        var columnCount = 0;
        while (jQuery("#column"+columnCount).size() >0)
            columnCount++;
        while(element.length > 0) {
            console.log('placing new element');
            var smallestColumn = 0;
            var smallestSize = jQuery("#columns").height();
            for (var i = 0; i < columnCount; i++) {
                var columnSize = jQuery(".column#column"+i).height();
                if (columnSize < smallestSize) {
                    smallestColumn = i;
                    smallestSize = columnSize;
                }
            };
            jQuery('.column#column'+smallestColumn).append(element);
            eltIndex++;
            element = jQuery("#element"+eltIndex);
            //alert(1);
        }
        //alert('Columns should be filled');
    };
});

myModule.directive('generateSubColumns', function() {
    return {
        restrict: 'A',
        controller: function() {
            var availableWidth = jQuery("#columns").width();
            var sizePerColumn = 100;
            var nbColumns = Math.floor(availableWidth/sizePerColumn);
            if (nbColumns<=1) 
                nbColumns=1;
            for (var i = 0; i < nbColumns; i++) {
                jQuery('<div class="column" id="column'+i+'">Column '+i+'</div>').appendTo('#columns');
            };
        }
    };
});

myModule.directive('postRender', [ '$timeout', function($timeout) {
    var def = {
        restrict: 'A', 
        terminal: true,
        transclude: true,
        link: function(scope, element, attrs) {
            $timeout(scope.setupColumns, 0);
        }
    };
    return def;
}]);

и немного css:

#columns {
    width: 100%;
}

.column {
    width: 100px;
    display:inline-block;
    vertical-align: top;
    border: 1px solid black;
}

.element {
    border: 1px solid red;
}

Как я могу это исправить? Заранее спасибо, hilnius