AngularJS и ngRepeat - вставить дополнительный элемент каждые n повторений

Я пытаюсь создать структуру, в которой каждые 7 повторяющихся divs добавляется дополнительный div. Этот div должен принадлежать родительскому объекту и не быть потомком одного из повторяющихся div.

Недостаточно просто изменить класс, весь контент будет другим, и совершенно другая логика ngShow будет использоваться с дополнительным div.

Итак, например:

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="special-child"></div>
</div>

В этом примере используется определенное количество div, ngRepeat может быть любым числом. Также важно, чтобы последний результат ngRepeat помещал в дополнительный div после него, даже если он не является точным кратным 7.

Текущая логика ngRepeat, которую я использую, это:

<div id="parent">
  <div class="child" ng-repeat="o in data"></div>
  <div class="special-child"></div>
</div>

Но это не работает должным образом, поскольку дополнительный div добавляется только один раз после всех повторяющихся div.

Обновление с помощью рабочего примера

<div id="parent">
  <div class="child" ng-repeat-start="o in data"></div>
  <div class="special-child" ng-if="( $index + 1 ) % 7 == 0 || $last" ng-repeat-end></div>
</div>

Для этого решения требуется AngularJS 1.2 +

Ответ 1