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 jzbruno

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div id="items" ng-controller="ItemsCtrl">
    <h2>items</h2>
    <p>{{lastUpdate}}</p>
    <section class="container" data-iso-repeat></section>
</div>

CSS

body { padding: 8px 20%; }
#items {
    margin: 0 auto; padding: 8px; 
    border: 1px solid #ddd; }
#items h2, #items p { 
    text-align: center; }
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 {
        link: function (scope, element, attrs) {
            scope.$watch('items', function () {
        
                element.find('article').remove();
                
                scope.items.forEach(function (item) {
                    var article = 
                        '<article id="' + item.id + '">' +
                            '<h2>' + item.title + '</h2>' +
                        '</article>';
                    element.append(article);
                });
            });
        }
    };
});

function ItemsCtrl($scope, $timeout) {
    
    $scope.items = [];

    $scope.update = function () {
        
        var now = new Date();
        $scope.lastUpdate = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
        
        $scope.items = [
            {id: 1, title: 'one' + Math.floor(Math.random() * 11)},
            {id: 2, title: 'two' + Math.floor(Math.random() * 11)},
            {id: 3, title: 'three' + Math.floor(Math.random() * 11)}
        ];
        
        $timeout($scope.update, 5000);
    };
    $scope.update();
}