javascript - Updating the limitTo value on a specific nested ngRepeat -

i'm new angularjs , having work on app has section of nested ngrepeats such below.

<div class="title-bar" ng-repeat="ordertype in someobj.ordertypes">     <div class="inner-panel" ng-repeat="status in ordertype.statuses">         <p>{{status.name}}</p>         <div class="order-list" ng-repeat="order in status.orders | limitto:orderfilterlimit">             <p>{{order.stuff}}</p>         </div>         <button ng-show="(status.orders.length > orderfilterlimit)" ng-click="loadmoreorderstolist()">load more</button>     </div> </div> 

the status.orders list can quite large @ times limit it. when user wants view more data specific section (which enumerated status) add 3 orderfilterlimit. problem when adding 3 every single .order-list in .inner-pannel element. there way can change orderfilerlimit variable based on id or class of element it's attached to?

for context here super simple snippet of loadmoreorderstolist() doing. https://jsbin.com/vapucixesa/1/edit?js

no need of declare orderfilterlimit inside controller, should have scope variable inside ng-repeat ng-repeat element have separate copy of orderfilterlimit because ng-repeat create child scope on each iteration.

markup

<div class="title-bar" ng-repeat="ordertype in someobj.ordertypes" ng-init="orderfilterlimit = 3">     <div class="inner-panel" ng-repeat="status in ordertype.statuses">         <p>{{status.name}}</p>         <div class="order-list" ng-repeat="order in status.orders | limitto:orderfilterlimit">             <p>{{order.stuff}}</p>         </div>         <button ng-show="(status.orders.length > orderfilterlimit)" ng-click="orderfilterlimit = orderfilterlimit + 3">load more</button>     </div> </div>