title: Angular JS with jquery masonry
body: <p>I need to use angular and masonry and also implement sorting and filtering.
  The fiddle here does use the masonry with Angular and has filtering and sorting working, however the layout does not seem like masonry. I do not think the masonry layout is applied at all.</p>
  
  <p><a href="http://jsfiddle.net/rdikshit/6swek/3/" rel="nofollow">http://jsfiddle.net/rdikshit/6swek/3/</a></p>
  
  <p></p>
  
  <pre><code>  &lt;div ng-app="test"&gt;
   &lt;div ng-controller="MainCtrl"&gt;
        &lt;input type="text" ng-model="nameFilter" /&gt;
      &lt;a href="#" ng-click="order = 'id'; reverse=!reverse"&gt;Order by id&lt;/a&gt;
      &lt;a href="#" ng-click="order = 'name';reverse=!reverse"&gt;Order by name&lt;/a&gt;
      &lt;a href="#" ng-click="order = 'age';reverse=!reverse"&gt;Order by age&lt;/a&gt;
       &lt;div class="items" masonry &gt;
           &lt;div ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order:reverse" class={{item.style}}&gt;
  
            &lt;span&gt;{{item.name}}&lt;/span&gt;
              &lt;span&gt;id: {{item.id}}&lt;/span&gt;
              &lt;br /&gt; &lt;span&gt;Age: {{item.age}}&lt;/span&gt;
                           &lt;br /&gt; &lt;span&gt;Style: {{item.style}}&lt;/span&gt;
  
       &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is another fiddle with Passy's directive:
  <a href="http://jsfiddle.net/rdikshit/6swek/5/" rel="nofollow">http://jsfiddle.net/rdikshit/6swek/5/</a></p>
  
  <p>STill does nt work. Even the sorting and filtering are not working now.</p>