html - using ng-repeat with Jquery causing trouble -

i'm using angularjs html5 template jquery. i'm facing problem toggle div (if toggle. further opens form.) i've collection

 categoryname1   categorytype1      itemcollection1[]      itemcollection2[]   categoryname2   categorytype2      itemcollection1[]      itemcollection2[] 

i want display collection this

<div class="tab-pane fade in active" id="tab-1"  ng-repeat="cat in    categories">    {{cat.name}}, {{cat.type}}        <div class="item-list right-checkout"  ng-repeat="item in cat.items">           {{item.name}}, {{item.price}} <button class="toggle">option</button>        </div> </div> 

the above toggle button toggles div below

  <div class="dropdown-option clearfix">         <div class="dropdown-details">             <form class="default-form">                 <h5>please select option</h5>                      <h6>option</h6>                         ------                        ------             </form>          </div>    </div> 

problem i'm facing is.. provide ng-repeat toggle buttons stops working.

i tried create nested directive, becuause there nested ng-repeat. didnt work. when included custom javascript (that handles toggle) child template. worked "with but". toggles continuously in loop equals parent items count. please guide me how overcome issue .

or there way call directive on ui below

 <div ng-repeat="cat in categories">       <div show-categories category="cat">          <div item-categories item="cat.items"> </div> /*displays items withing categories)*/        </div>  </div> 

all want avoid ng-repeat inside directive.

normally toggle scope parameter , ng-show/ng-if, not sure if want.

angular.module('test', [])    .controller('test', function($scope) {    $scope.parents = [{      name: "parent 1",      children: [{        name: "p1 child 1",        form: "p1 c1 form"      }, {        name: "p1 child 2",        form: "p1 c2 form"      }]    }, {      name: "parent 2",      children: [{        name: "p2 child 1",        form: "p2 c1 form"      }, {        name: "p2 child 2",        form: "p2 c2 form"      }]    }]  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>    <div ng-app='test' ng-controller='test'>    <div ng-repeat="parent in parents">      {{parent.name}}      <div ng-repeat="child in parent.children">        {{child.name}}        <button type="button" ng-click="child.isopen = !child.isopen">toggle</button>      </div>    </div>        <br><br>    <div ng-repeat="parent in parents">      <div ng-repeat="child in parent.children">        <div ng-show="!!child.isopen">{{child.form}}</div>      </div>    </div>  </div>