CSS is not applied properly to AngularJS dynamically loaded elements - css

Question

I'm using this good script from CodyHouse to set up a filterable portfolio: http://codyhouse.co/demo/content-filter/
I'm using AngularJS to parse data via JSON and everything is fine, except for the fact that the CSS is not applied properly to the dynamically loaded elements.
You can see the differences in this image:
As you can see, the first row, which is loaded via Angular, has no css applied at all. The second row, which is already placed in the HTML, is working fine.
How is it possible? All the elements in both rows have the same CSS selectors and the same CSS rules applied.
Here you can find a Plunker: http://plnkr.co/edit/mFtMpm5CJOiPcu3tRVOj?p=preview
This is the generated markup from Angular:
<li class="mix color-1 check1 radio2 option3 ng-scope" style="display: inline-block;" ng-repeat="drawing in drawings"><img src="img/img-1.jpg" alt="Image 1"></li>
And this is the html static markup:
<li class="mix color-1 check1 radio2 option3" style="display: inline-block;"><img src="img/img-1.jpg" alt="Image 1"></li>
This is the css applied:
.cd-gallery ul { text-align: justify; }
.cd-gallery li { width: 23%; }
There is absolutely no difference between them and I'm getting a bit crazy on this. It's the first time that I get issue with css applied on dynamic and static elements. Thanks in advance for any help.

Answer 1

Ok, I found the solution to the problem.
Basically the whitespace between the (necessary for the justification) is not emitted with Angular's repetition so you also have to wrap the whitespace so it gets repeated, like:
<span ng-repeat-start="drawing in drawings"></span>
<li></li>
<span ng-repeat-end></span>
Thanks to this thread: Angular: Why doesn't CSS justification work with ng-repeat?
Of course it's not optimal, because it forces you to add a ton of useless markup but at least it works. If anyone can suggest a best solution it will be appreciated.