The initial setup:
var app = angular.module("app", []);
app.controller("AppCtrl", function() {
this.things = ["one", "two", "three"];
})
<body ng-app="app" ng-controller="AppCtrl as app">
</body>
In AngularJS 1.2, ng-repeat now supports multiple elements with the ng-repeat-start directive.
<body ng-app="app" ng-controller="AppCtrl as app”>
<div ng-repeat-start="thing in app.things">{{ thing }}</div>
<div ng-repeat-end=""></div>
</body>
The directive will iterate through app.things, and create these two sets of <div> elements for each thing.
The binding works normally, regardless of where it appears within the directive:
<body ng-app="app" ng-controller="AppCtrl as app">
<div ng-repeat-start="thing in app.things">{{ thing }}</div>
Anything in here
<div ng-repeat-end="">Also in here with binding {{ thing }}</div>
</body>
As long as the elements containing the ng-repeat-start and ng-repeat-end directives are sibling elements, everything will operate correctly.
The following example, with the ng-repeat-end in a child element, will not work:
<body ng-app="app" ng-controller="AppCtrl as app">
<div ng-repeat-start="thing in app.things">{{ thing }}</div>
Anything in here
<div><div ng-repeat-end="">Also in here with binding {{ thing }}</div></div>
</body>
There's more to learn!