Angularjs: ng-repeat, put a ´divider´ in ng-repeat to separate data that was recently loaded

When the page is loaded the user is presented with a set of products, then if he/she clicks a button more products are fetched and appended to the list. I am trying to find an Angular way to put a row to separate the products that were already loaded from the recently appended. I don't want to manipulate the DOM directly and I can't push an empty row to the array of products because the length of the array is used somewhere else.

How could I do this?

Here is a basic Bin

If you don't want a divider after the last item, just use :

<... ng-repeat="...">
   <hr ng-show="!$last" />
   ...
</...>

$last is true if the repeated element is last in the iterator.

I think you'll need to keep track of this yourself, in another $scope (array) property. In your ng-repeat loop, check to see if $index is in this array. If so, add/show the <hr>.

<... ng-repeat="...">
   <span ng-show="showHr($index)"><hr></span>
   ...
</...>

Function showHr() should return true when you want to display an <hr>.

You could also use ng-switch instead of ng-show.