How can I generate a UI-grid table from a form?

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):

Controller

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');
  };

});

myTable.html (currently just have a button that opens the modal, this is where the table should generate)

<button type="button" class="btn btn-primary" ng-click="openModal()">Add Data Table</button>

modalToTable.html (modal)

<div class="modal-header">
    <button type="button" class="close" ng-click= "closeModal()">&times;</button>
    <h3 class="modal-title" id="modal-title"><strong>Create Data Table</strong></h3>
</div>

<div class="modal-body">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Table Name:</label>
                <input id="table-name-input" name="table-name"/>
            </div>
            <div class="form-group">
                <label for="Columns">Columns:</label>
                <input type="text" class="column-row-tableConfig" value="0" />
            </div>
            <div class="form-group" style="padding-bottom: 10px">
                <label for="Rows">Rows:</label>
                <input type="text" class="column-row-tableConfig" value="0" />
            </div>
        </fieldset>
    </form>
</div>
<div class="modal-footer">
   <button type="button" class="btn btn-primary">Create</button>
   <button type="button" class="btn btn-primary" ng-click="closeModal()">Cancel</button>
</div>

//this would be where I'd like to capture the data from the Modal form

The Question Is there an angular approach to generating a ui-grid table based on the data from the form in the modal?

For example, If I enter into the modal:

• Table Name : "foo Table"
• column: 4
• row :3

I should see a ui-grid table titled 'foo Table' with 4 columns and 3 rows.