AngularJS как динамически разделить список на несколько столбцов

у меня есть несколько элементов li, которые я хочу равномерно распределить по 3 различным столбцам. Поэтому мне нужно, чтобы 1-я треть элементов списка была показана в первом ul,следующая треть во 2-м ul и т. д.

право знать, что мой подход несколько статичен:

<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:0:10">
    {{ skill.name }}
  </li>
</ul>
<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:10:21">
    {{ skill.name }}
  </li>
</ul>
<ul class="small-12 medium-4 columns">
  <li ng-repeat="skill in skills.development | slice:21:32">
    {{ skill.name }}
  </li>
</ul>

Я создаю 3 строки в моем шаблоне, а затем я создал пользовательский фильтр, который разрезает список, чтобы я мог получить первые 11 элементов, следующие 11 элементов и так далее. Проблема в том, что количество строк в каждый ul не назначается динамически так:

Math.ceil(skills.development.length / 3)

поэтому, если у меня больше элементов, мне придется вручную изменить количество строк. Фильтрация также является проблемой. Представьте, что я ищу слово с 5 совпадениями в первом столбце и один во втором столбце. Тогда у меня были бы совершенно неровные размеры колонн. Длина должна быть пересчитана динамически, когда я фильтрую список.

в идеале не только число строк в столбце, вычисляется динамически, но и количество столбцов. Поэтому, если есть более 15 элементов, он должен отображать три столбца, но если есть только 10 элементов, 2 столбца будут выглядеть лучше (так как в каждом есть только 5 элементов). И если есть менее 5 элементов, будет отображаться только один столбец.

Я решил, что я должен либо попытаться решить его в представлении, либо сделать какую-то вспомогательную функцию, подобную пользовательской функции фильтра, которую я уже написал. Но как это сделать?