AngularJS: Two-column odd/even layout

Question

Having a problem trying to get a repeating two-column layout in AngularJS. My dataset is a JSON object of image information. I want to show a two column layout of images. No matter what I tweak, something is wrong in my odd/even logic, but I can't seem to figure it out. What am I doing wrong?

.left {
    float: left !important;
    width: 50% !important;
}
.right {
    float: right !important;
    width: 50% !important;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left,
    .right {
        float: none;
        width: auto;
    }
}

<div ng-repeat="issue in issues">
  <div ng-if="$even" class="group">
    <div class="left" ng-if="$even">
      <img src="{{ issue.image }}" ng-src="{{ issue.image }}">
    </div>
    <div class="right" ng-if="$odd">
      <img src="{{ issue.image }}" ng-src="{{ issue.image }}">
    </div>
  </div>
</div>

Answer 1

The issue with code is you had wrap your logic inside

<div ng-if="$even" class="group">

Div which is restricting to show odd logic div.

instead of having two different div, I'd say use ngClassEven & ngClassOdd directive. Also remove the wrapper div which has ng-if="$even" condition.

<div ng-repeat="issue in issues">
    <div ng-class-even="'left'" ng-class-odd="'right'">
        <img ng-src="{{ issue.image }}">
    </div>
</div>