AngularJS nested ng-repeat scope

Question

<div ng-repeat="store in stores">
  .. some html ..
  <div ng-repeat="item in store.items | limitTo: 50">
    ... item html ...
  </div>
  <div ng-show="store.items.length > 50">
    <button ng-click="">Show all</button>
  </div>
</div>

When someone clicks the button, I want to show all of the items, not just the first 50. How do I do this? If I have a $scope.itemCount = 50 in my controller, then that'll apply for ALL stores and all items. I want it to be only for the scope of store.items.

Any help?

Answer 1

Try this:

<div ng-repeat="store in stores" ng-init="storeCount = itemCount">
  .. some html ..
  <div ng-repeat="item in store.items | limitTo: storeCount">
    ... item html ...
  </div>
  <div ng-show="store.items.length > storeCount">
    <button ng-click="storeCount = store.items.length">Show all</button>
  </div>
</div>