I am using Angularjs and pagination to show multiple divs. I am then hiding the divs based on some criteria. See code exract below

```
                <div class="DataItem" dir-paginate="x in parametersToDisplay | orderBy:'Name' | filter:textFilter | itemsPerPage: pageSize" current-page="currentPage" ng-hide="x.DetailLevel > detailLevel">                  
                    <label id="lblParameterName{{x.ConfigId}}" class="DataItemLabel">{{x.Name}}</label>
                    <label id="lblDescription{{x.ConfigId}}" class="DataItemLabel">{{x.Description}}</label>
                    <label id="lblUnits{{x.ConfigId}}" class="DataItemUnits">{{x.Units}}</label>
                    <input id="txtParameterValue{{x.ConfigId}}" class="DataItemValue" type="text" ng-blur="CheckCongigValue($event, x)" value="{{x.Value}}" />
                </div>
            </div>

```

The problem is that the divs that should be hidden are not visible but they still take the space. If I remove the pagination and just use a div with a ng-repeat it works fine and the hidden divs totally disappear.

I read that the bootstrap css for hidden uses display:hidden and overwrites the angularjs css which uses display:none. I also believe this can be overridden to correct the problem, but I have tried several things and can't seem to work it out.

Could someone give me a simple example showing how to do this.

Thank you in advance!