How to use AngularJS ng-repeat on <ul> tag without repeating it?

Question

With this code:

<ul data-ng-repeat="airport in airports">
            <li>{{airport.code}}</li>
            <li>{{airport.city}}</li>
            <li>{{airport.name}}</li>
</ul>

I end up with three <ul>, each with one <li> inside of them.

How can I get one <ul> with three <li> inside?

Answer 1

You can used ng-repaet as:

<ul>
    <li ng-repeat="rp in $ctrl.repeat">{{rp}}</li>
</ul>

{{rp}} repeat object x time

Output should like this:

.list 1

.list 2

.list 3

Answer 2

You can use ng-repeat-start directive:

<ul>
    <li ng-repeat-start="airport in airports">{{airport.code}}</li>
    <li>{{airport.city}}</li>
    <li ng-repeat-end>{{airport.name}}</li>
</ul>

Here it is working in plnkr.