AngularJS ng-repeat


The ngRepeat directive instantiates a template once per item from a collection. The collection must be an array or an object. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.


  • <element ng-repeat="expression"></element>
  • <div ng-repeat="(key, value) in myObj">...</div>
  • <div ng-repeat="variable in expression">...</div>


$indexnumber iterator offset of the repeated element (0..length-1)
$firstboolean true if the repeated element is first in the iterator.
$middleboolean true if the repeated element is between the first and last in the iterator.
$lastboolean true if the repeated element is last in the iterator.
$evenboolean true if the iterator position $index is even (otherwise false).
$oddboolean true if the iterator position $index is odd (otherwise false).


AngularJS provides these parameters as special variables that are available in the ng-repeat expression and anywhere inside of the HTML tag on which the ng-repeat lives.

Iterating over object properties

<div ng-repeat="(key, value) in myObj"> ... </div>

For example

<div ng-repeat="n in [42, 42, 43, 43]">

Tracking and Duplicates

ngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then makes the corresponding changes to the DOM:

  • When an item is added, a new instance of the template is added to the DOM.
  • When an item is removed, its template instance is removed from the DOM.
  • When items are reordered, their respective templates are reordered in the DOM.


  • track by for any list that may include duplicate values.
  • track by also speeds up list changes significantly.
  • If you don't use track by in this case, you get the error: [ngRepeat:dupes]
$scope.numbers = ['1','1','2','3','4'];

  <li ng-repeat="n in numbers track by $index">

ng-repeat-start + ng-repeat-end

AngularJS 1.2 ng-repeat handle multiple elements with ng-repeat-start and ng-repeat-end:

// table items
$scope.tableItems = [
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'

// template
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>


Item 1: Row 1
Item 1: Row 2
Item 2: Row 1
Item 2: Row 2