AngularJS Dropdown ng-if on ng-repeat element

Question

I'm building a twitter bootstrap list using angular's ng-repeat:

<ul class="dropdown dropdown-menu">
    <li class="menuOption" ng-repeat="option in options">
        <a data-ng-click="option.value>0 ? foo() : goo()">
        {{option.label}}
        </a>
    </li>
</ul>

Now, I want to include a divider ( <li class="divider"></li> ) inside this list. It should be before the last element in the list (which is also indicated by option.value with a negative value, which is probably an easier indication).

My problem is that since the ng-repeat iteration is on the li element itself, I couldn't find a way to use ng-if on this element.

Answer 1

Try ng-repeat-start and ng-repeat-end :

<ul class="dropdown dropdown-menu">
    <li class="menuOption" ng-repeat-start="option in options" ng-if="option.value>0">
      <a data-ng-click="option.value>0 ? foo() : goo()">
        {{option.value}}
        </a>
    </li>
    <li class="divider" ng-repeat-end ng-if="option.value<0">
      option < 0 ({{option.value}})
    </li>
  </ul>

DEMO