AngularJS Tabs with content

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

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>
<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">Tab Name</label>
          <input type="text" name="tabName" ng-model="tabName" required class="form-control input-medium" placeholder="Enter tab name..." />
        </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="form-group">
    <div>
      <div class="panel panel-default data-table">
        <div class="panel-heading">
          <ul class="nav nav-tabs">
            <li ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}">
              <a data-target="#tab" aria-controls="home" data-toggle="tab">{{tab.id}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
            </li>
            <li ng-click="addTab()">
              <a aria-controls="home" data-toggle="tab">(+) Add Tab</a>
            </li>
          </ul>
        </div>
 ...

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

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.tabName = '';
  $scope.tabs = [];
  $scope.addTab = function() {
    var data = "";
    $scope.modal = myService.openModal(data);
    $scope.modal.then(function(response) {
      $scope.tabs.push({
        id: response.tabName
      });
      //set the newly added tab active. 
      $scope.selectedTab = $scope.tabs.length - 1;
    });
  }


  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}`

    });
  };

  $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.selectedTab = $scope.tabs.length - 1;
  $scope.deleteTab = function(index) {

    $scope.tabs.splice(index, 1);

    //set selected tab to the 1st by default.
    $scope.selectedTab = 0;

  }

  /** Function to set selectedTab **/
  $scope.selectTab = function(index) {
    $scope.selectedTab = index;
  }

}]);

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



  $scope.done = function(isValid) {
    if (isValid) {
      $modalInstance.close({
        tabName: $scope.tabName
      });
    } else {
      return false;
    }
  };
});

app.factory('ApiFactory',...