Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <svg ng-style="{height: height, width: height}">
        <g ng-repeat="row in grid" transform="translate(0,{{$index * elementHeight}})">
            <rect ng-repeat="point in row" ng-style="{fill: colors[point]}" width="{{elementHeight}}" height="{{elementHeight}}" x="{{$index * elementHeight}}"></rect>
        </g>
    </svg>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.grid = [
      [2,2,1,3,3,4,2,1,4,1,3,2,2,3,4,4,3],
      [2,4,2,1,1,2,3,3,4,4,3,4,1,1,3,2,2],
      [3,1,3,4,4,4,1,1,1,4,3,2,4,1,2,3,2],
      [4,1,2,3,1,3,2,3,4,1,2,1,4,4,1,3,4],
      [3,1,1,1,2,3,2,4,2,3,4,4,4,3,2,2,1],
      [1,3,3,2,4,3,1,4,4,1,2,2,1,2,3,2,3],
      [3,1,4,2,4,2,2,3,3,2,1,4,1,4,4,1,3],
      [4,3,1,2,1,1,1,3,2,4,4,3,2,3,4,1,2],
      [4,4,3,3,4,2,4,2,3,1,2,3,2,1,2,1,1],
      [1,2,2,2,1,3,4,4,1,4,3,3,3,4,2,4,1],
      [4,2,3,4,3,2,1,3,2,3,1,4,3,2,1,4,1],
      [4,2,4,1,2,4,1,4,3,2,2,1,3,3,3,3,2],
      [1,3,2,1,2,4,4,1,3,3,3,4,2,2,1,1,4],
      [1,4,1,4,3,3,3,4,3,2,1,1,2,1,4,2,4],
      [2,4,1,2,2,4,3,2,1,3,4,3,1,4,1,3,3],
      [3,3,2,3,4,1,3,2,2,2,4,2,3,1,1,4,4],
      [2,3,4,4,3,1,4,1,4,2,4,1,1,2,2,3,1]
    ];
    $scope.height = 400;
    $scope.elementHeight = $scope.height/$scope.grid.length;
     
    $scope.colors = {
      1: 'blue',
      2: 'red',
      3: 'green',
      4: 'yellow'
    } 

}