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

<divclass="panel-heading">
    My panel
    <spanng-repeat="tag in tags"><spanclass="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-repeatdoes 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.

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