Create a Dynamic Matrix using Angularjs

Question

I need to create a Dynamic Matrix where the user inserts its size.

This Matrix needs to be using Div and not Table of HTML, and the content to be shown inside the Matrix is in images and needs to be navigable using both Mouse and Arrow Keys.

Below the Code and what I managed to do in Plunker.

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

app.controller('MainCtrl', function($scope) {
   $scope.name = 'World';
   $scope.matriz =[];

   $scope.linha;
   $scope.coluna;

   $scope.getNumber = function(num) {
      return new Array (Number(num));   
   }
});

HTML

<p>Linha</p>
        <input type="text" ng-model="linha" placeholder="Digite o tamanho..."> 
        <p>Coluna</p>
        <input type="text" ng-model="coluna"  placeholder="Digite o tamanho..." >
        <p></p>
        <table border="1" style="background-color:FFFFCC;border-collapse:collapse;border:1px solid FFCC00;color:000000;width:100%" cellpadding="3" cellspacing="3">
          <tr data-ng-repeat="i in getNumber(linha)">
           <td data-ng-repeat="i in getNumber(coluna)"> <input placeholder="Digite os dados..."> </td>
         </tr>
       </table>

Plunker of the Project: http://embed.plnkr.co/75FnXMIsx4jBmBR7BCSn/

What I need is something in this style: http://jsfiddle.net/BNrBX/

But also implementing the functionality of choosing the size of the Matrix by inserting the value of Rows and Columns