Create a Dynamic Matrix using AngularJS

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

This Matrix must be using Div and not Table of HTML, and the content to be displayed within the Matrix is in images and must be navigable using both the Mouse and the Directional Keys.

Below the Code and what I was able 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>

Project Plunker: link

What I need is something in this style: link

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