Blank space appears between ng-repeat and collection-repeat ionic view

I have a weird problem in my view. I have two div - the first contains ng-repeat while the second contains a collection-repeat. Below is the code:

<ion-view view-title={{header2}}>
<ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<ion-content class="padding">
        <div ng-repeat="itemgroup in main.products | groupBy: '[category, itemStatus]'" ng-if="itemgroup[0].itemStatus=='OPEN'">                <div class="row" ng-repeat="item in itemgroup" ng-if="item.itemStatus=='OPEN'">
                <div class="col col-80" >
                    <button ng-class="{'fulfilled': item.lineThrough}" 
                            class="row btnElement button button-{{item.ionicButtonColor}}" 

    <div ng-if="allprod==true" class="list">
        <div class="row" collection-repeat="product in allproducts | filter:listData.header.newProduct"     
            <button class="col col-90 btnElement button round outline" ng-disabled="productSelected==true" ng-click="add(product)"> 
                <span ng-if="product.category !=null" >{{ product.category }} </span>
                <span ng-if="product.productname !=null" >{{ product.productname }} </span>
            <button class="col col-10 button button-icon ion-trash-a input-button"
                    ng-disabled = "product.productIdentifier2=='Master'"

This initially displays correctly since the array main.products is empty. However, as I add elements to the main.product array, and scroll down on the collection-repeat items, there is a gap that builds between the two divs. I seems like the view thinks it’s still showing items from the main.products. Is this a bug in ionic?

If I scroll up to view more elements from the main.product array, the space disappears:

By the way, if I change the collection-repeat to ng-repeat, the problem disappears.