Angularjs and twitter bootstrap - creating X items per row

I am using angular.js with twitter bootstrap to create client-side of an web-application.

I am wondering, what is the proper way to do something like this

For now I am doing something like this

<div class="span9">
    <div class="row">
        <div class="span3" ng-repeat="set in selectedCollection.sets">
            {{set.name}}</div>
    </div>
</div>

With this code, even if I have for example 4 elements, I get 2 rows, first one with 3 elements, second one with one element. Event if this solution works (for now) I am wondering about this:

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

this part is from official bootstrap documentation.

If this is an improper way to do this kind of thing, how can it be achieved? Should I somehow split this data to 2 dimensional array and create two nested loops so I will have 3 span3 divs in every row?

If that is the case, I would create a function in model that would return this two dimensional array based on one dimensional array and use ng-repeat="dimensionalSet in mappingFunction()" in my outer element.