No spacing between bootstrap-labels with ng-repeat

Question

When I am adding labels using ng-repeat from angular.js, they are shown without spacing. Here is a Plunker which demonstrates it.

But if I add labels manually, just has copied html, then they are shown with whitespace.

Is there a way to add white space between labels without additional styling, as it does in pure bootstrap?

Answer 1

You could change your HTML markup to this...

   <div class="panel-heading">
    My panel
    <span ng-repeat="tag in tags"><span class="label label-primary">{{tag}}</span> </span>
   </div>

Demo: http://bootply.com/113372

Answer 2

Or you could use CSS: Adjacent sibling selector

Adjacent selector. It will select only the specified element that immediately follows the former specified element.

.label + .label {
  margin-left: 8px;
}

Answer 3

The explanation for this is that ng-repeat does not add space between your <label> That's why the solution by Skelly works. The better way to ensure spacing is to use   as space can be trimmed.

<span ng-repeat="tag in tags">
    <span class="label label-primary">{{tag}}</span>&nbsp;
</span>