Stop AngularJS inserting <span class="ng-scope"></span> using ng-include

Question

I'm using the Foundation layout framework, which automatically floats the last sibling of .column to the right and I really appreciate this is a behaviour. However, AngularJS takes it upon itself to insert span.ng-scope after every div.column, which somehow causes browsers to consider the last span the last sibling of .column (even though it is not).

Specifically the css in Foundation responsible for this is:

[class*="column"] + [class*="column"]:last-child { float: right; }

As I understand it, [attribute*="substring"] should select only siblings that match, so, for the above, only elements whose class attribute contains column (including columns). I would think a span tag whose class attribute that does not contain column should not match (and thus be ignored by :last-child). However, this does not seem to be the case.

Regardless, the span is causing the problem:

• Angular buggering it up (jsfiddle)
• Works fine without Angular (same jsfiddle, no ng-include)

Is there a way to configure angular to stop inserting those span tags? I would, begrudgingly, modify the css selector to somehow ignore all span tags; however I might eventually need/want to use a span tag.

Answer 1

Since you indicated the div can be moved inside, this works:

<ng-include src="'main.tmpl'"></ng-include>

Then in your template:

<div class="row">
   <article id="sidepanels" class="four columns">
   ...
</div>

I'm not aware of any way to prevent angular from inserting the span tags (I think it keeps track of scopes that way -- for garbage collection).