Angular nested ng-repeat - reuse first after second

advertisements

I have the following example nested ng-repeats:

<div ng-repeat="item1 in controller.items1>
    [[ item1 ]] // This displays properly
    <div ng-repeat="item2 in controller.items2">
        [[ item2 ]] // This displays properly
    </div>
    [[ item1 ]] // This doesn't get displayed
</div>

It would seem that the nested ng-repeat is stopping the first one from being used later in the code. Can someone please help with how the first ng-repeat can be used in there?


Its working fine. Check below example -

<body ng-controller="myCtrl" ng-app="app">
  <div ng-repeat="item1 in items1">
    {{item1.name}}
    <div ng-repeat="item2 in items2">
      {{item2.name}}
    </div>
    {{item1.name}}
  </div>
</body>

var app = angular.module('app', [])

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.items1 = [{
      name: 'Item1 - One'
    }, {
      name: 'Item1 - Two'
    }, {
      name: 'Item1 -Three'
    }, {
      name: 'Item1 - Four'
    }];

     $scope.items2 = [{
      name: 'Item2 - One'
    }, {
      name: 'Item2 - Two'
    }, {
      name: 'Item2 - Three'
    }, {
      name: 'Item2 - Four'
    }];
  }
]);