Angular ng-repeat to generate Foundation tabs

I'm having a hard time using ng-repeat with Foundation (http://foundation.zurb.com/) tabs.

This displays tabs as I expect to see them, three across, evenly spaced.

<dl class="tabs three-up">
  <dd class="active"><a href="#a">A</a></dd>
  <dd class="active"><a href="#a">A</a></dd>
  <dd class="active"><a href="#a">A</a></dd>
</dl>

When I use ng-repeat to generate the tabs as below, the tabs no longer sit side by side, but each tab takes up the entire width, stacked on top of each other.

<dl ng-repeat="foo in foos" class="tabs three-up">
  <dd><a href="#/foos/{{foo.id}}">{{foo.name}}</a></dd>
</dl>

How can I render the tabs when they are generated in ng-repeat?