title: Jquery Masonry with AngularJS
body: <p>in my project i try to implement jquery masonry. but its getting working. i try googling but found some post. but i tried it its not working.</p>
  
  <p>my directive code is </p>
  
  <pre><code>shout.directive("shoutList", function($timeout) {
      return  {
          restrict : 'E',
  
          replace : true,
  
          templateUrl : 'views/shout/shout-list.html',
  
          scope : {
              shouts : "="
          },
  
          //require : "ShoutController",
  
          controller : function($scope)   {
              $scope.deleteShout = function() {
                  console.log('shout deleted');
              }
          },
  
          link : function(scope, element, attr)   {
              scope.$watch('shouts', function()   {
                  // console.log("changing......");
                  // scope.$evalAsync(
                      document.getElementById("shout-content-holder").masonry({
                          itemSelector: '.shout'
                      })
                  // );
              });
          }
      }
  });
  </code></pre>
  
  <p>directive template is</p>
  
  <pre><code>&lt;div id="shout-content-holder"&gt;
      &lt;div class="shout" ng-repeat="shout in shouts"&gt;
          &lt;p&gt;{{shout.message}}&lt;/p&gt;
          &lt;img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout()"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i load the shouts from a webservice. please help me to make this work...</p>