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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container" ng-app="myApp">
  <div ng-controller="ctrl">
    <div class="panel panel-default data-table">
      <div class="panel-heading">
        <ul class="nav nav-pills">
          <li role="presentation" ng-class="{'active': targetTable == t}" ng-repeat="t in tables"><a href="#" ng-click="select(t)">{{t.name}}</a></li>
          <li><a href="#" ng-click="select(t)">+ Add Table</a></li>
        </ul>
      </div>
      <div class="panel-body">
        <table class="table table-bordered">
          <thead>
            <tr class="actions">
              <th class="unique-id hidden-border" colspan="1"></th>
              <th ng-class="{'active': showColumnActions(c)}" ng-repeat="c in targetTable.columns track by $index"><span>
                         <a class="btn btn-xs"><i class="fa fa fa-pencil" aria-hidden="true"></i></a>
                         <a class="btn btn-xs" ng-click="removeColumn($index)"><i class="fa fa-times-circle" aria-hidden="true"></i></a></span>
              </th>
            </tr>
            <tr>
              <th class="unique-id">ID #</th>
              <th contenteditable ng-repeat="c in targetTable.columns track by $index" ng-class="{'add-column': c.id == null}" ng-model="c.label" ng-blur="updateColumn(c, $index)" ng-focus="setActiveColumn(c)"></th>
              <th...

CSS

body { margin:60px 0px; }

.data-table .nav-pills li { text-transform: capitalize; }
.nav.nav-pills li span { padding: 20px; }
.nav.nav-pills li a > input { height:22px; padding: 0 4px; width:130px; }
.table { border: 0; margin-bottom: 0;}
.table .unique-id { width: 30px !important; text-align: center; background-color:#f5f5f5; }
.table td, .table th { width: 120px;  }
.table th.add-column { max-width: 30px; }
.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 tr.actions th { border: 0 !important; background-color:white !important; position: relative;}
.table tr.actions th > span { display:none; }
.table tr.actions th.active > span { display:block; }
.table tr.actions th a { color: #4371bb; }
.table tr.actions th a:hover { color: #28497d;}
.table th span { display: block; padding: 2px; margin: 0 auto; text-align: center; position: absolute; top: -9px; right: -1px; background-color: #a6c8ff;} 


.table th.hidden-border {border: 0 !important;}

JavaScript

// Define the `ReportsMockUpsApp` module
angular.module('customControl', ['ngSanitize']).
directive('contenteditable', ['$sce', '$parse', function($sce, $parse) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      var disable = $parse(attrs.disabled)(scope) || false;
      if (!ngModel) return; // do nothing if no ng-model      
      
      attrs.$set('contenteditable', (!disable).toString()); //set the appropriate value for `contenteditable` attribute.
      
      // Write data to the model
      var read = function(value) {
        var html = element.html() || (typeof value === "string"? value: "");
        
        // When we clear the content editable the browser leaves a <br> behind
        // If strip-br attribute is provided then we strip this out
        if ( attrs.stripBr && html == '<br>' ) { html = ''; }
        ngModel.$setViewValue(html);
      };  

      // Specify how UI should be updated
      ngModel.$render = function() {
        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      // Listen for change events to enable binding
      element.on('blur keyup change', function() {
        scope.$evalAsync(read);
      });
      
      setTimeout(function(){
        //console.log(ngModel.$modelValue, attrs.contenteditable);
        read(ngModel.$modelValue); // initialize
      });
      
    }
  };
}]);


var app = angular.module('myApp', ['customControl']);

// Define the `table` factory on the `ReportsMockUpsApp` module
app.factory('tableFactory', function() {
  var srvc = {};
  srvc.create = function(label) {
     return {
       id: Date.now(),
       name: label || "table 01",
       columns: [{}],
       rows: [{}],
       uniqueIdCounter: 1000,
       columnIdCounter: 0
     };
  };   
  return srvc;
});


// Define the `appController` controller on the `ReportsMockUpsApp`...