JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
 <div ng-controller="Game as ctrl">
        <table class="board">
    <h1>Table</h1>
    <input type="number" ng-model="val">
    <button ng-click="ctrl.foo(val)">PRESS</button>

    <tr ng-repeat="item in ctrl.arr">
        <td ng-repeat="td in ctrl.arr" ng-click="ctrl.push($parent.$index, $index, val)">{{ctrl.arr2[$parent.$index][$index]}}</td>
    </tr>
</table>
            
        
    </div>
</div>

CSS

table.board td {
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    vertical-align: middle;
    border: solid 1px #ddd;
}

JavaScript

var app = angular.module("MyApp", []);
function Game() {
		
	this.arr2 = [];
	this.foo = function(size){

		this.arr = [];
		for(var i = 0; i < size; i++){
			this.arr.push(i);

			this.arr2.push([]);
			for(var j = 0; j < size; j++){
				this.arr2[i].push("");
			}
		}
		
	}
	this.push = function(tr, td, size){

		this.arr2[tr][td] = 'X';
		
		this.rule(tr, td, size);

	}
	this.rule = function(tr, td, size){

		var rez = [];
			for(var i = 0; i < size; i++){

				rez.push(tr[i]);
			}
		console.log(tr, td, size);
		console.log(rez);


	}
}