index.html
                    
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row" ng-repeat="row in northsouth">
<div class="tile" ng-repeat="col in eastwest"
style="background-image: url(http://imgs.xkcd.com/clickdrag/{{row}}{{col}}.png)"
ng-class="{below: row[row.length-1] == 's'}">
</div>
</div>
<!-- GA tracking -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32408977-1']);
_gaq.push(['_setDomainName', 'plnkr.co']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
                    style.css
                    
/* Put your css in here */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div.tile {
width: 64px;
height: 64px;
display: inline-block;
background-size: 64px 64px;
}
div.tile.below {
background-color: black;
}
div.row {
width: 2816px;
height: 64px;
}
                    app.js
                    
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.northsouth = ['9n','8n','7n','6n','5n','4n','3n','2n','1n','1s','2s','3s','4s','5s','6s','7s','8s','9s','10s'];
$scope.eastwest = ['18w','17w','16w','15w','14w','13w','12w','11w','10w','9w','8w','7w','6w','5w','4w','3w','2w','1w','1e','2e','3e','4e','5e','6e','7e','8e','9e','10e','11e','12e','13e','14e','15e','16e','17e','18e'];
});