Using ng-if with ng-repeat-end leads to unexpected results

[vvolodin]

I'm using the following markup two output data in 2 columns:

<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-class="clearfix" data-ng-repeat-end="" data-ng-if="!$even"></div>

It works well on the first load but when I dynamically change my upcoming.forecasts array all my clearfix divs end up at the bottom of the container, looks something like this:

<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-repeat-start="forecast in upcoming.forecasts">
</div>
<div data-ng-class="clearfix" data-ng-repeat-end="" data-ng-if="!$even"></div>
<div data-ng-class="clearfix" data-ng-repeat-end="" data-ng-if="!$even"></div>
<div data-ng-class="clearfix" data-ng-repeat-end="" data-ng-if="!$even"></div>

[matsko]

This is a known bug. And at the moment unfortunately there isn't a workaround other than placing the IF and REPEAT directives on separate elements. Please take a look at this: #3584 (comment)