title: How can I generate a UI-grid table from a form?
body: <p>The goal here is to take the following form data sitting inside a bootstrap modal, and generate a UI-grid table based on the form elements (# columns, rows, Title, etc):
  <a href="https://i.stack.imgur.com/DkouU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DkouU.png" alt="enter image description here"></a></p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>angular.module('myApp')
      .controller("modalToTable", function ($scope, $uibModal, $log) {
  
      $scope.items = ['item1', 'item2', 'item3'];
  
      //open a modal window to create a data table
      this.openModal = function (size, parentSelector) {
          var parentElem = parentSelector ? angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
          var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              backdrop: 'static', 
              templateUrl: 'modalToTable.html',
              controller: 'createDataTableCtrl',
              windowClass: 'modal-scale',
              //size: size,
              appendTo: parentElem,
              resolve: {
                  items: function () {
                    return $scope.items;
                  }
          }
      });
  
      modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
          }, function () {
          $log.info('Modal dismissed at: ' + new Date());
          });
  
      };
  })
  
  .controller('createDataTableCtrl', function ($scope, $uibModalInstance, items) {
  
    $scope.items = items;
    $scope.selected = {
      item: $scope.items[0]
    };
  
    $scope.ok = function () {
      $uibModalInstance.close($ctrl.selected.item);
    };
  
    $scope.closeModal = function () {
      $uibModalInstance.dismiss('cancel');
    };
  
  });
  </code></pre>
  
  <p><strong>myTable.html</strong> (currently just have a button that opens the modal, this is where the table should generate)</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" ng-click="openModal()"&gt;Add Data Table&lt;/button&gt;
  </code></pre>
  
  <p><strong>modalToTable.html (modal)</strong></p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" ng-click= "closeModal()"&gt;&amp;times;&lt;/button&gt;
      &lt;h3 class="modal-title" id="modal-title"&gt;&lt;strong&gt;Create Data Table&lt;/strong&gt;&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-body"&gt;
      &lt;form action="" method="post" name="registration" class="register"&gt;
          &lt;fieldset&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="Student"&gt;Table Name:&lt;/label&gt;
                  &lt;input id="table-name-input" name="table-name"/&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="Columns"&gt;Columns:&lt;/label&gt;
                  &lt;input type="text" class="column-row-tableConfig" value="0" /&gt;
              &lt;/div&gt;
              &lt;div class="form-group" style="padding-bottom: 10px"&gt;
                  &lt;label for="Rows"&gt;Rows:&lt;/label&gt;
                  &lt;input type="text" class="column-row-tableConfig" value="0" /&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
     &lt;button type="button" class="btn btn-primary"&gt;Create&lt;/button&gt;
     &lt;button type="button" class="btn btn-primary" ng-click="closeModal()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  
  //this would be where I'd like to capture the data from the Modal form
  </code></pre>
  
  <p><strong>The Question</strong>
  Is there an angular approach to generating a ui-grid table based on the data from the form in the modal?</p>
  
  <p>For example, If I enter into the modal:</p>
  
  <ul>
  <li>Table Name : "foo Table"</li>
  <li>column: 4</li>
  <li>row :3</li>
  </ul>
  
  <p>I should see a ui-grid table titled 'foo Table' with 4 columns and 3 rows. </p>