Hide div which has double ng-repeat

Question

I have this markup:

 <div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
    <div class="col-lg-12">
        <div ng-repeat="controlgroup in value2.ControlGroup"
             ng-show="controlgroup.ListOfControls.length > 0">
            <table ng-if="controlgroup.ListOfControls.length > 0">
                <tbody>
                    <tr ng-repeat="value in controlgroup.ListOfControls = (controlgroup.ListOfControls  | filter: searchCompanyControl )">
                      &nbsp;
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

What I'm trying to do is hide the first div which has the ng-repeat for requirements if all control groups are hidden based on

controlgroup.ListOfControls.length > 0

I'm able to hide the second div ng-repeat but I'm not sure how to hide the most outer ng-repeat if all the control groups in the requirement are hidden based on the condition that there are no list of controls.

Answer 1

You could use "ng-if" on the top div.

<div class="row" ng-if="controlgroup.ListOfControls.length > 0" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">

I am not sure if this would cancel your ng-repeat or not, but if it does, you could wrap it in its own div.

eg.

<div ng-if="controlgroup.ListOfControls.length > 0">
  <div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">

Please let me know if this helps!