如何在ng-repeat中分离多个元素？

我正在制作一个使用ng-repeat来显示两个指令和一个元素的网站。第二个指令和元素都显示在x个“重复”（使用索引）的后面。这些指令是矩形卡，从左到右显示，直到屏幕显示满，然后移动到下一行，如以下屏幕快照所示：

The white rectangles being the first directive and the black rectangles being the second directive and element. The problem I'm facing is that if the black rectangle is supposed to be the first item on a new line it will remove the last white rectangle from the line above and show up before the black rectangle on the next line. Really what's happening is the two directives inside of the ng-repeat are getting bundled together and not separating when there isn't space on one line for both of them. Here is an example of what I mean:

Alright, so on to my code. This is my html for the ng-repeat.

<div ng-repeat="acqui in acquis" class="repeated">
    <card-info class="card" acqui="acqui" ng-style=""></card-info>
    <ad-info class="ad-style" ng-if="!(($index + 1) % adFrequency)"></ad-info>
    <div class="ad-spacing" ng-if="!(($index + 1) % adFrequency)"></div>
</div>

As you can see, the card-info directive (white rectangles) shows up every time, while the ad-info directive (black rectangles) only show up every adFrequency number of times.

Here is my CSS. I am using less, so it's formatted a bit differently:

.card {
    .shadow;
    width: 350px;  
    height: 530px;
    display: inline-table;
    background-color: white;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 10px 20px 12px;
}
.ad-style {
    position: relative;
    .ads {
        position: absolute;
        .shadow;
        width: 350px;  
        height: 530px;
        display: inline-table;
        background-color: black;
        margin: 6px 0 0 8px;
    }
}
.ad-spacing {
    width: 350px;
    display: inline-table;
    margin: 0 10px -5px 10px;
}

有什么办法可以使我“解开”这些捆绑包吗？

注意：我尝试制作一个jsfiddle，但是该项目太大了，无法完成所有工作。我已经尽可能地删除了，所以我可以发表这篇文章。