Angularjs Masonry Before

angularjsMasonryImagesLoaded1.js

//This is how HTML, Controller & Directive looked in my actual app at this point.
//Notice that we are applying masonry for every element as they are added by ng-repeat.

//HTML
/*
 <div id="photoContainer" style="position:relative;height:800px;zoom:1;">
      <div class="photo" ng-repeat="photoPost in photoPosts">
           <img ng-src="{{photoPost.photo.url}}" add-masonry="photoPost"></div>
      </div>
</div>
*/

//MainController gets photoPosts & initializes masonry.
function MainCtrl($scope, Project, BackendService) {
  //this is asynchronous $scope.photoposts will be loaded at some later time
  $scope.photoPosts = BackendService.query();

  $scope.container = $('#photoContainer');
  $scope.container.imagesLoaded(function() {
    $scope.container.masonry({
      itemSelector: '.photo'
    });
  });

}

//directive.. reapply masonry when an item is loaded. 
//Fails because our item contains images
clientAppModule.directive('addMasonry', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {
       //reapply masonry
       scope.container.masonry('reload');
    }
  };
});