Q:

How to use ng-repeat to correctly display twitter bootstrap labels?

Seems to be a simple task. But ng-repeat on span tag will create consecutive <span>s without a space.
<span class="label label-success" ng-repeat="r in roles">

If those <span> tags connect to each other without a space or line break, those labels will look merged together (especially in Chrome).
See my example here.
http://plnkr.co/edit/AFMHnxsLk4EjDFQWsZVv?p=preview

A:

You can add margin to the right side
.label.label-success {
    margin-right: 4px;
}

if you don't want spacing after the last one, you can simply do: 
.label.label-success:last-of-type {
    margin-right: 0;
}

Note :last-of-type is only supported in modern browsers
Edit after Morgan's comment
.label.label-success:after {
    content:"&nbsp;"
}

Could be a better solution depending on what kind of spacing your after. 

