Diretriz simples angular e de alvenaria sem sobreposição

Hoje eu enfrento o problema de blocos sobrepostos após a diretiva ng-repeat. Aqui, o código que leva à sobreposição.

<div class="main__results--instagram" ng-show="showInstagram">
 <div ng-repeat="searchResult in searchResults.instagram" class="item item--instagram--{{ searchResult.imageType }}" ng-gate8-masonry>
  <img ng-src="{{ searchResult.image }}">
 </div>
</div>

Uma solução simples que me ocorreu foi escrever minha própria diretiva ( ng-gate8-masonry ).

Esta diretiva é muito fácil:

(function() {
    "use strict";

    angular.module('masonry', ['ng']).directive('ngGate8Masonry', function($timeout) {
        return function(scope, element, attrs) {

            if (scope.$last){
                $timeout(function () {
                    var parent = element.parent();
                    var masonry = new Masonry(parent[0], {
                        itemSelector: '.item',
                        isAnimated: true,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        },
                        transitionDuration : "0.4s",
                        isResizable: false
                    });
                });
            }
        };
    })
})();

Depois de encontrar o último elemento no loop de repetição de ng, o ngGate8Masonry entra em seu contêiner pai de elemento com a alvenaria.
$ timeout nos ajuda a superar o efeito da sobreposição.

PS

Parâmetros de diretório TODO para inicialização de objeto de Maçonaria.