Angularjs modal popup, populate table columns

Coded for this SO question: http://stackoverflow.com/questions/29807422/creating-popup-window-with-form-content-and-then-show-output-in-parent-page-and?

by aman1981

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.6.9/angular-sanitize.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css">
<div ng-app="myApp" ng-controller="IndexController">

  <ui-view> </ui-view>
  <div class="container">


    <div class="panel panel-default data-table">
      <div class="panel-heading">
        <table class="table table-bordered margin-top-15" ng-form="form">
          <thead>
            <tr class="actions row-border">
              <th class="hidden-border"></th>
              <th ng-repeat="c in targetTable.columns track by $index">
                <span class="span-action">
					<a class="btn btn-xs"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
				</span>
              </th>
            </tr>
            <tr>
              <th>ID #</th>
              <th ng-repeat="c in targetTable.columns" ng-model="c.label">{{c.refColName}} <br /> <span class="col-font-header"> {{c.refInputOperator}} {{c.refColType}} </span></th>
              <th class="comment-fixed-width" ng-model="c.idComment">ID Comment</th>
              <td class="center add-column fixed-width"></td>
            </tr>
          </thead>
          <tbody ng-init="vm.to=0" id='tableBody'>
           <!--<tr ng-repeat="r in targetTable.rows">-->
           <tr  ng-repeat="r in vm.getItems() | limitTo : 10 : vm.to">
              <td...

JavaScript

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngSanitize']);

app.controller("IndexController", ['$location', '$state', '$scope', '$http', function($location, $state, $scope, $http) {
  var self = this;
  //Start: Initialize table - Following is used to setup the UI table and setup its rows and columns
  $scope.createTable = function(tableCounter, currentTableId) {
    $scope.tableCounter++;
    return {
      id: currentTableId++,
      tableName: '',
      columns: [],
      rows: [{}],
      uniqueIdCounter: 1
    }
  }
  $scope.initializeTable = function(isEdit) {
    $scope.tableCounter = 0;
    var currentTableId = 0;
    var table = {
      id: 0,
      tableName: "",
      columns: [],
      rows: [{}]
    };

    $scope.tables = [table];
    $scope.targetTable = $scope.tables[0];
    $scope.tables = [];
    $scope.targetTable = null;
    $scope.isUpdating = false;
    $scope.showColumns = isEdit ? true : false;
    $scope.tables.push($scope.createTable($scope.tableCounter, currentTableId));

    // set the newly create table as active
    $scope.targetTable = $scope.tables[$scope.tableCounter - 1];
  }
  //End initializing table

  self.getItems = function() {
    //Read json from the API
    $http.get('https://api.myjson.com/bins/d1ugw').success(function(data) {
      if (data.length > 0) {
        var arr = [];
        for (var j = 0; j < 500; j++) {
          arr.push(data[j]);
        }
        $scope.setJson = arr;
        $scope.initializeTable(true);
        var columns = $scope.targetTable.columns;

        //These are the 3 columns of the Table but can vary dynamically(currently just hardcoding it)
        var refColName = "state, month , year";

        //Push the columns to the table array
        var colArray = refColName.split(',');
        for (var i = 0; i < colArray.length; i++) {
          $scope.targetTable.columns.push({
            id: columns.length,
            refColName: refColName.split(',')[i]
          });
  ...