Создать несколько таблиц с несколькими входами, используя AngularJS 1.6

Question

Я работаю над задачей Angular JS, где мне нужно взять ввод из текстового поля и сформировать строки, в которых есть два поля ввода. Рассмотреть строки и столбцы При вводе значений в них формируются два поля ввода. Таблица со строками и столбцами должна сформироваться. Вот ссылка на скрипку

https://jsfiddle.net/iamsaisanthosh/r1zync3g/

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.table = [];
  $scope.cols = [];
  $scope.rows = [];
  $scope.arr = [];
  $scope.arh = [];
  $scope.trr = [];

  $scope.makeArray = function() {
    $scope.trr.length = 0;
    for (var k = 0; k < parseInt($scope.table); k++) {
      $scope.trr.push(k);
    }
    $scope.arr.length = 0;
    for (var i = 0; i < parseInt($scope.rows); i++) {
      $scope.arr.push(i);
    }
    $scope.arh.length = 0;
    for (var j = 0; j < parseInt($scope.cols); j++) {
      $scope.arh.push(j);

    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <input ng-model="table" type="text" ng-change="makeArray()" />
    <table>
      <tr ng-repeat="o in trr">
        <td> <input ng-model="rows[$index]" type="text" ng-change="makeArray()" />
        </td>
        <td> <input ng-model="cols[$index]" type="text" ng-change="makeArray()" /></td>
      </tr>
    </table>
    <div>
      <table>
        <tr ng-repeat="o in arr">
          <td ng-repeat="o in arh">Col</td>
        </tr>
      </table>

    </div>

  </div>
</div>

Я могу взять ввод из текстового поля и сформировать строки. При вводе значений в сформированные поля ввода формируется таблица с введенными значениями. Табличная форма только для введенных значений первой строки Проблема в том, что я не могу сделать это более чем на одну строку

Не удалось сформировать таблицу для введенных значений второй строки В приведенной выше скрипке Введите 2 в текстовое поле 2 строки будут сформированы с двумя полями ввода Введите 3 и 4 соответственно в поля ввода первой строки Вы можете увидеть формирование таблицы с 3 рядами и 4 столбцами Мне нужно то же самое, когда я ввожу значения во второй строке Вторая таблица должна составлять

Answer 1

   //This piece is wrong right, $scope.rows, $scope.cols are not Strings/Numbers they are arrays and suppose to contain each tabs rows and columns index wise.

   $scope.arr.length = 0;
    for (var i = 0; i < parseInt($scope.rows); i++) {
      $scope.arr.push(i);
    }

    $scope.arh.length = 0;
    for (var j = 0; j < parseInt($scope.cols); j++) {
      $scope.arh.push(j);

    }

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
   $scope.table = 0;
   $scope.cols = [];
   $scope.rows = [];

   $scope.makeArray = function() {
      if ($scope.table) {
        return new Array(parseInt($scope.table));
      } else {
        return new Array(0);
      }
   }

   $scope.getRowsCount = function ($index) {
      if ($scope.rows[$index]) {
         return new Array(parseInt($scope.rows[$index]));
      } else {
         return new Array(0);
      }
   }

   $scope.getColsCount = function ($index) {
      if ($scope.cols[$index]) {
        return new Array(parseInt($scope.cols[$index]));
      } else {
        return new Array(0);
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <input ng-model="table" type="text" />
    <table>
      <tr ng-repeat="t in makeArray() track by $index">
        <td> <input ng-model="rows[$index]" type="text" />
        </td>
        <td> <input ng-model="cols[$index]" type="text" /></td>
      </tr>
    </table>
    <div>
      <table ng-repeat="t in makeArray() track by $index">
        <tr ng-repeat="r in getRowsCount($index) track by $index">
          <td ng-repeat="c in getColsCount($parent.$index) track by $index">Col</td>
        </tr>
      </table>

    </div>

  </div>
</div>