title: ng-repeat: how do I properly reference $odd or $even by variable?
body: <p>How can I reference <code>$odd</code> or <code>$even</code> by variable in <code>ng-repeat</code>? 
  I am trying to do this:</p>
  
  <pre><code>&lt;ng-repeat="item in items" ng-if="$odd"&gt;these are odd{{item}}&lt;/div&gt;
  &lt;ng-repeat="item in items" ng-if="$even"&gt;these are even {{item}}&lt;/div&gt;
  </code></pre>
  
  <p>By doing this:</p>
  
  <pre><code>&lt;div ng-repeat="side in sides"&gt;
    &lt;div ng-include='template'&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  //template
  &lt;ng-repeat="item in items" ng-if="side"&gt;these are {{side}} {{item}}&lt;/div&gt;
  
  //in the controller
  $scope.sides = ['$odd','$even']
  </code></pre>
  
  <p><code>{{side}}</code> results in <code>$odd</code> and <code>$even</code> text on the document where expected, but all the <code>{{item}}</code> are coming through.</p>
  
  <p>I've tried <code>ng-if="side"</code>, <code>ng-if=side</code>, <code>ng-if={{side}}</code>, <code>ng-if=" 'side' "</code>.
  I'm sure this is just my rookie ignorance at play and its staring me right in the face. </p>
  
  <p>Edit:::</p>
  
  <p>Sorry I wasn't clear. Assigning $odd and $even was simple enough if I wanted to write out the whole layout longhand, which I relented and did for now. What I would like to do, however, is use ng-include to template the reused portions of the layout as much as possible. A very simplified version of my layout looks something like this:</p>
  
  <p>What I would like to do is turn something like this:</p>
  
  <pre><code>&lt;div class="outer-column1"&gt;
    &lt;div class="innercolumnA"&gt;
      &lt;div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$even"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="innercolumnB"&gt;
      &lt;div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$odd"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="outer-column2"&gt;
    &lt;div class="innercolumnA"&gt;
      &lt;div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$even"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="innercolumnB"&gt;
      &lt;div class="thumbnail" ng-repeat"thumbnail in thumbnail" ng-if"$odd"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>into something like this:</p>
  
  <pre><code>&lt;div ng-include="outer-column" ng-repeat="outercolumn in outercolumns"&gt;&lt;/div&gt;
  
  //template outer-column
  &lt;div class="outer-column"&gt;
    &lt;div ng-include="inner-column" ng-init="innercolumns = [$odd,$even] " ng-repeat="innercolumn in innercolumns"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  //template inner-column
  &lt;div class="innercolumn" ng&gt;
     &lt;div ng-include="'thumbnail'" ng-repeat"thumbnail in thumbnail" ng-if"innercolumn"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  //template thumbnail
  &lt;div class="thumbnail"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The question is: how can I reference the $odd and $even variables for ng-if indirectly? for example, I tried an <code>ng-init="sides = [$odd,$even]" and passed that in the ng-repeat for the innercolumn template</code> and put <code>ng-if="side"</code> into the template, but no go. </p>
  
  <p>I also thought about passing a function like ng-if="whichSide(side)" That would return $odd or $even, but it seems like the $odd and $even variables are not defined on the $scope object...</p>
  
  <p>But that's the spirit of what I'm trying to understand regarding the $odd and $even variables and indirectly referencing them.... Hope that makes sense. The project is working just fine, it's just annoying to make changes to 10 lines of code whenever I make an update vs. 3 lines of templated layout. Thanks!</p>