View list of default-label in bootstrap - html

Question

I would like to view list of strings in default-label format of bootstrap with angular-js ng-repeat
Following is a code snippet,
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default col-md-2">{{hobby.name}}</span>
</div>
</div>
Output of above does not looks good. default label fills col-md-2 and also if list is big then it goes out of row div.
I would like to have output as following
How can I acheive following with default-label from bootstrap classes?
And I would like to use only classes/styles provided by bootstrap and NOT custom css.

Answer 1

You dont need the col-md-2 class on the span element:
<div class="row">
<div class="col-md-12">
<span ng-repeat="hobby in hobbies" class="label label-default">{{hobby.name}}</span>
</div>
</div>
You can read up more on the label variations on the bootstrap website
A note from the bootstrap website:
Have tons of labels? Rendering problems can arise when you have dozens
of inline labels within a narrow container, each containing its own
inline-block element (like an icon). The way around this is setting
display: inline-block;. For context and an example, see #13219.
UPDATE
If you are using the ng-repeat directive directly on a label label- you might end up with labels that do not have spacing between the labels. This is related to this question and this question
You might end up with labels looking like this:
I have created a jsfiddle to show the two results, you might need to update your HTML to fix the spacing issue.
You can use the following HTML to resolve the issue if you do not want to add a custom class with margin:
<div class="row">
<div class="col-sm-12">
<span ng-repeat="label in labels">
<span class="label label-default">{{label}}</span>
</span>
</div>
</div>
The result:

Answer 2

Answer by Tjaart van der Walt looks perfect.I also did work around and found following answer,
<div class="row">
<ul class="list-inline col-md-6">
<li ng-repeat="hobby in hobbies">
<span class="label label-default">{{hobby.name}}</span>
</li>
</ul>
</div>