Unable to get Masonry to work at all - angularjs

Question

I've been trying to make Masonry (also tried Salvattore but none of them will work) to work for a good few hours now, I've followed multiple tutorials and examples but it just won't happen for some reason. I'm using Bootstrap's grid system and angular to create the number of columns.
EDIT: I created a simple fiddle which actually seem to work: https://jsfiddle.net/j57vnaa2/1/
Question is, why doesn't my original code work?
I've included Masonry through the CDN, I've checked the console that the script has loaded and indeed it has. Also did it via bower and NPM to test if it worked with those but it yielded the same result.
I've set the class js-masonry to my container, which is a row with grid columns looped out via ng-repeat. Then I have set the data-masonry-options='{ "itemSelector": ".grid-item" }' as well as applied the class grid-item to my columns. But it just doesn't want to work, it's not doing ANYTHING.
I don't know what else that could be wrong, I've searched and searched the web but come up with no solution.
Is there something obviously wrong here?
<div class="row padding">
<div class="col-sm-12">
<div class="grid js-masonry row" data-masonry-options='{ "itemSelector": ".grid-item"}'>
<h1 class="text-center">Similar movies</h1>
<div ng-repeat="movie in similarMovies"
class="col-xs-12 col-sm-6 col-md-3 grid-item cut-off">
<a href="#/movies/{{movie.id}}">
<figure>
<img ng-src="{{getSrc(movie.poster_path)}}" alt="{{movie.title}}"
class="image enlarge">
</figure>
</a>
</div>
</div>
</div>
</div>