jQuery Isotope with AngularJS

Creating an angular directive to use isotope. This one creates the html elements in place of a call to ng-repeat.

by dirkk0

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/isotope/1.5.21/jquery.isotope.min.js"></script>
<script src="http://cdn.jsdelivr.net/angularjs/1.0.2/angular.min.js"></script>
<div id="items" ng-controller="ItemsCtrl">
    <section class="container" data-iso-repeat="collection"></section>
    <button ng-click="addOne()">Add one</button>
</div>

CSS

body { padding: 8px 20%; }
#items {
    margin: 0 auto; padding: 8px; 
    border: 1px solid #ddd; }
section {
    margin: 0 auto; padding: 8px 0 0 8px; 
    border: 1px solid #ddd; }
section article { 
    margin: 0 8px 8px 0; padding: 4px; 
    border: 1px solid #ddd; }

JavaScript

var app = angular.module('isotopeApp', []);

app.directive('isoRepeat', function ($timeout) {
    return {
        scope: {
            items: '=isoRepeat'
        },
        template:'<div><article ng-click="logHello()" ng-repeat="item in items | orderBy:\'title\'"><h2>{{item.title}}</h2></article></div>',
        link: function (scope, element, attrs) {
            
            var options = {
                animationEngine : 'jquery',
                itemSelector: 'article',
                layoutMode: 'fitRows',
                sortAscending: true
            };
            
            element.isotope(options);
            
            scope.$watch('items', function(newVal, oldVal){
               $timeout(function(){
                    element.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' }); 
               });
            },true);
            
            scope.logHello = function(){
              console.log("hello world")
            }
        }
    };
});

app.controller('ItemsCtrl', function ItemsCtrl($scope, $timeout, dataService) {
        
    $scope.update = function () {
        dataService.get().then(function (data) {                       
            $scope.collection = data;
        });
        $timeout($scope.update, 4000);
    };
    
    $scope.update();
   
    $scope.addOne = function(){
        $scope.collection.push({id:1, title: "Item 22"});
    }        
});
    
app.service('dataService', function ($http) {
    return {
        get: function () {
            
            // generate random data
            var randomItems = [];
            for (var i = 0; i < 10; i++) {
                
                var id = Math.floor(Math.random() * 101);
                
                randomItems.push({
                    id: id,
                    title: "Item "+ id
                });
            }
            
            // prepare data for jsfiddle echo service
            var postData = $.param({
               ...