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.

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="items"></section>
</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 () {
    return {
        scope: {
            items: '=isoRepeat'
        },
        link: function (scope, element, attrs) {
            
            var options = {
                animationEngine : 'jquery',
                itemSelector: 'article',
                layoutMode: 'fitRows',
                getSortData : {
                    title: function(e) {
                        return e.find('h2').text();
                    }
                },
                sortBy: 'title',
                sortAscending: true
            };
            
            var init = function() {
                element.isotope(options);
            };
            
            var setup = function () {
                
                var articles = '';
                scope.items.forEach(function (item) {
                    articles += 
                        '<article id="' + item.id + '">' +
                            '<h2>' + item.title + '</h2>' +
                        '</article>';
                });
                
                element.isotope('remove', element.find('article'));
                element.isotope('insert', $(articles));
            };
            
            scope.$watch('items', function (newValue, oldValue) {
                if (newValue.length == 0) init();
                if (newValue.length > 0) setup();
            });
        }
    };
});

app.controller('ItemsCtrl', function ItemsCtrl($scope, $timeout, dataService) {
    
    $scope.items = [];
    
    $scope.update = function () {
        dataService.get().then(function (data) {                       
            $scope.items = data;
        });
        $timeout($scope.update, 4000);
    };
    
    $scope.update();
});

app.service('dataService', function ($http) {
    return {
        get: function () {
            
            // generate random data
            var randomItems = [];
            for...