No Spacing Between Bootstrap-labels With Ng-repeat

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

Solution 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

Solution 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;
}

Solution 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>