brock/boom.html

## boom.html
<!DOCTYPE HTML>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" charset="utf-8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.lazyload/1.9.0/jquery.lazyload.min.js"></script>
    <script type="text/javascript">
        angular.module('boomApp', [])
            .controller('BoomCtrl', function ($scope, $http) {
                $http.get(".boom")
                .success(function(data){
                    $scope.lists = data['lists'];
                });
        });
    </script>

    <title>Boom!</title>
</head>
<body>
<div ng-app="boomApp">
    <div id="app" ng-controller="BoomCtrl">
        <div class="list" style="clear:both;" ng-repeat="list in lists">
            <div ng-repeat="(listname,array) in list">
                <h2 style="background-color:#C8C8C8;">{{listname}}</h2>
                <div class="arrayitem" style="clear:right;" ng-repeat="item in array">
                    <div ng-repeat="(name, url) in item">
                        <figure style="float:left;">
                            <img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="{{url}}" width="150" height="150" alt="{{name}}" />
                            <figcaption><a ng-href="{{url}}">{{name}}</a></figcaption>
                            <input type="text" onClick="this.select();" value="{{url}}" />
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
        window.onload = $("img.lazy").lazyload();
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" charset="utf-8"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
	<script src="//cdn.jsdelivr.net/jquery.lazyload/1.9.0/jquery.lazyload.min.js"></script>
	<script type="text/javascript">
	angular.module('boomApp', [])
	.controller('BoomCtrl', function ($scope, $http) {
	$http.get(".boom")
	.success(function(data){
	$scope.lists = data['lists'];
	});
	});
	</script>

	<title>Boom!</title>
	</head>
	<body>
	<div ng-app="boomApp">
	<div id="app" ng-controller="BoomCtrl">
	<div class="list" style="clear:both;" ng-repeat="list in lists">
	<div ng-repeat="(listname,array) in list">
	<h2 style="background-color:#C8C8C8;">{{listname}}</h2>
	<div class="arrayitem" style="clear:right;" ng-repeat="item in array">
	<div ng-repeat="(name, url) in item">
	<figure style="float:left;">
	<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="{{url}}" width="150" height="150" alt="{{name}}" />
	<figcaption><a ng-href="{{url}}">{{name}}</a></figcaption>
	<input type="text" onClick="this.select();" value="{{url}}" />
	</figure>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script type="text/javascript">
	window.onload = $("img.lazy").lazyload();
	</script>
	</body>
	</html>