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 ksingh24

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.19/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>
<div ng-app="myApp" ng-controller="IndexController">

  <script type="text/ng-template" id="modal.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal Window</h3>
    </div>
    <div class="modal-body">
      <form role="form" name="nameForm" novalidate class="form-horizontal">
        <div class="form-group">
          <label class="control-label">Choose Status</label>
          <select ng-model="status" name="status" class="form-control input-medium" ng-options="status.text for status in statuses">
                    <option value="">Select status...</option>
                </select>
        </div>
        <div class="form-group">
          <label class="control-label">Choose environment</label>
          <select ng-model="env" name="env" class="form-control input-medium" ng-options="env.text for env in environment">
                    <option value="">Select environment...</option>
                </select>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
      <button class="btn btn-primary" type="button" ng-click="done(nameForm.$valid)">Done</button>
    </div>
  </script>

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


    <div class="panel panel-default data-table">
      <div class="panel-heading">
        <ul class="nav nav-pills">
          <li role="presentation" ng-class="{'active':...

CSS

body {
  margin: 60px 0px;
}

.data-table .nav-pills li {
  text-transform: capitalize;
}

.nav.nav-pills li span {
  padding: 20px;
}

.table .unique-id {
  width: 10px !important;
  text-align: center;
  background-color: #f5f5f5;
}

.table td,
.table th {
  width: 120px;
}

.table .center {
  text-align: center;
}

.table th.font-normal {
  font-weight: normal;
}

.table .view-next-set {
  width: 5px;
  text-align: center;
  font-size: 0.9em;
}

.table .add-column {
  width: 60px;
  font-size: 1em;
  vertical-align: middle;
}

.table .unique-id,
.table td.blank {
  background-color: #f5f5f5;
}

.table.submitted td.ng-invalid {
  background-color: red;
}

JavaScript

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

app.controller("IndexController", ['$location', '$state', '$scope', '$filter', 'myService', function($location, $state, $scope, $filter, myService) {

  $scope.open = function() {
    var data = "";
    $scope.modal = myService.openModal(data);

    $scope.modal.then(function(response) {
      $scope.name  = response.env.text +' / '+ response.status.text;
			$scope.addColumn();
    });
  }


  var data = "";
  var table = {
    id: 0,
    name: "table 1",
    columns: [],
    rows: [{}],
    uniqueIdCounter: 1037
  };

  $scope.tables = [table];
  $scope.targetTable = $scope.tables[0];

  $scope.addColumn = function() {
    var columns = $scope.targetTable.columns,
      id = columns.length;
    $scope.targetTable.columns.push({
      id: columns.length,
      //label: `Column ${id}`
			label: $scope.name
    });
  };

  $scope.addNewRow = function(value, row) {
    if (!value || value === "" || typeof value !== 'string') return;
    $scope.targetTable.rows.push({});

    row.id = $scope.targetTable.uniqueIdCounter++;
  };

  $scope.read = function() {
    return JSON.stringify(table);
  };
  
  $scope.save = function() {
  	var valid = true
    
    for(var i = 0; i < $scope.targetTable.rows.length; i++) {
    	if (!$scope.targetTable.rows[i]['0']) {
      	valid = false;
      	break;
      }
    }
    
    $scope.targetTableSubmitted = true;
    if (valid) {
    	alert('submitted');
    } else {
    	alert('please fill table data');
    }
    
    
  };


}]);

app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
    $state.go('index');
  };

  $scope.statuses = [{
      id: "1",
      text: "Approved"
    },
    {
      id: "2",
      text: "Rejected"
    },
    {
      id: "3",
      text: "Pending"
    },
    {
      id: "4",
      text: "Completed"
    }
  ];

 ...