Using Twitter Bootstrap's .row element with ng-repeat

Question

I have the following snippet in my AngularJS app:

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

This will generate a div element with the class col-sm-6 for every proverb in my proverbs array. My intention is to display two columns whenever a screen is big enough.

Despite not using Bootstrap's .row element, the above snippet works exactly as intended.

The question is, how could I include a .row element that would only appear every second iteration of ng-repeat so that I would get the following end result:

<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
    </div>
  </div>
</div>

Also, given that whenever the sum of the spans of .col elements in Bootstrap is greater than 12 the next element gets pushed down, is there even any reason to use the .row class other than to guarantee a new row is generated before all columns are completely filled?

Answer 1

If you don't need the .row then you could do this

<div ng-repeat="proverb in proverbs">
  <div class="col-sm-6">
    <div class="alert alert-warning">
      <a href="#/{{langID}}/{{$index}}">{{proverb}}</a>
      <ng-show="$index % 2 == 0" br/>
    </div>
  </div>
</div>