AngularJS Initialization Demo (basic)

see http://jsfiddle.net/gesellix/xxKjw/ for more details

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<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>

CSS

#columns {
    width: 100%;
}

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

.element {
    border: 1px solid red;
}
}

JavaScript

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;...