How to only trigger parent ng-click event for target child element

Question

Have a click event ng-click="$ctrl.toggleSub(state)" in the first row that is triggering the ng-if="showSubCat" event in the second row. This makes the second row appear when I click.

The problem is that it's causing all of the ng-repeat options to appear vs just the one I clicked.

For instance I'm getting:
Parent
- Child
- Child
Parent
- Child
- Child

I would like it to behave like this:
Parent
- Child
- Child
Parent

I only want the clicked ng-repeat options to expand accordingly. I've tried passing in the state object but am not having any luck. Any help would be greatly appreciated

  toggleSub(state) {
    this.$log.log(state)
    this.$scope.showSubCat = !this.$scope.showSubCat
  }

<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
        <td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td>
        <td md-cell>-</td>
        <td md-cell>{{state.totalCount}}</td>
      </tr>
      <tr md-row ng-repeat-end
                 ng-repeat="subcat in state.data | orderBy: 'subcategory'"
                 ng-if="showSubCat">
        <td md-cell></td>
        <td md-cell>{{subcat.subcategory}}</td>
        <td md-cell>{{subcat.count}}</td>
        <td md-cell>{{subcat.percentage}}</td>
      </tr>

Answer 1

Make the showSubCat boolean a property of the state iteration object:

  toggleSub(state) {
    this.$log.log(state)
    //this.$scope.showSubCat = !this.$scope.showSubCat
    state.showSubCat = ! state.showSubCat;
  }

<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
        <td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td>
        <td md-cell>-</td>
        <td md-cell>{{state.totalCount}}</td>
      </tr>
      <!-- BEFORE
      <tr md-row ng-repeat-end
                 ng-repeat="subcat in state.data | orderBy: 'subcategory'"
                 ng-if="showSubCat">
      -->
      <!-- AFTER -->
      <tr md-row ng-repeat-end
                 ng-repeat="subcat in state.data | orderBy: 'subcategory'"
                 ng-if="state.showSubCat">
      <!-- -->
        <td md-cell></td>
        <td md-cell>{{subcat.subcategory}}</td>
        <td md-cell>{{subcat.count}}</td>
        <td md-cell>{{subcat.percentage}}</td>
      </tr>

By making the showSubCat boolean part of the state iteration object, it will be different for each item in the parent ng-repeat .