AngularJS@1.0.2

<!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>

/* 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;
}

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'];
});