ng-repeat did not show same as type each manually on screen

Question

Yesterday, I see this question on the stackoverflow:

No spacing between bootstrap-labels with ng-repeat

The Question owner only want to get a solution , so I open a new question to ask cause.

Here is the plnkr

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

This will be compiled to

<!-- ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">panel</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">angular</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary ng-scope ng-binding" ng-repeat="tag in tags">bootstrap</span>
<!-- end ngRepeat: tag in tags -->

I try to type each manually

<!-- ngRepeat: tag in tags -->
<span class="label label-primary">panel</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary">angular</span>
<!-- end ngRepeat: tag in tags -->
<span class="label label-primary">bootstrap</span>
<!-- end ngRepeat: tag in tags -->

And, this two have the same css which I check on the Google Chrome Developer Tool.

I am very curious why this could cause different view?

Answer 1

Angular will rewrite the html for ng-repeat. In your manual case, if you remove the newlines and make it all squished together, you get the same effect as the first one. Chrome is also breaking it up and showing them as newlines whereas in reality its not the case.

Just open the same plnkr in firefox and in the HTML panel, check the "Show Whitespace" and you will see that there are no whitespaces in the one that angularjs rewrote. Your manual case will have whitespaces which lead to the spacing between the labels.