angular flickr image loading example

HTML

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<div class="grid" ng-controller="MainCtrl">
    <img ng-repeat="image in images"class="grid-item" ng-src="{{ image.media.m }}" />
    
</div>

CSS

.grid {
    background : pink;
    width : 420px;
    
   
       
}

.grid-item {
    width: 200px;
  margin-bottom: 10px;

}
.grid-item--width2 {
    width: 400px;
}

JavaScript

var elem = document.querySelector('.grid');
var place = 'kim larsen';

angular.module('app', [])
.controller('MainCtrl', ['$scope', function ($scope) {
    
    window.getPhotos = function (data) {
        $scope.$apply(function() {
            $scope.images = data.items;
            
            imagesLoaded(document.querySelector('.grid'), function (instance) {
    
                var msnry = new Masonry(elem, {
                    // options
                    itemSelector: '.grid-item',
                    columnWidth: 20,
                    gutter : 10
                    
                });
    
            });
        });
    }
    
    var src = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + place + "&tagmode=any&format=json&jsoncallback=getPhotos";
    var script = document.createElement("script");
    script.src = src;
    document.body.appendChild(script);
}])

angular.bootstrap(document, ['app']);