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?

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>
<div ng-app="myApp" ng-controller="Index">

  <div class="panel panel-default data-table">

    <div class="panel-body">
      <table class="table table-bordered">

        <tr>
          <th>User Id</th>
          <th>Name</th>
          <th>Address</th>
          <tr>
            <tr ng-repeat="item in respose">
              <td data-column="User Id" contenteditable="true">{{item.userId}}</td>
              <td data-column="Name" contenteditable="true">{{item.name}}</td>
              <td data-column="Address" contenteditable="true">{{item.address}}</td>
            </tr>
      </table>
    </div>
  </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.bootstrap', 'ngSanitize']);

app.controller("Index", ['$scope', function($scope) {

  $scope.result_function = function() {
    $scope.respose = [{
        "userId": 1,
        "name": "Adam",
        "address": "123 Oak Road"
      },
      {
        "userId": 2,
        "name": "Silver",
        "address": "523 Tren Road"
      },
      {
        "userId": 3,
        "name": "Peter",
        "address": "Oak Tree Road"
      },
      {
        "userId": 4,
        "name": "Manning",
        "address": "Broadway"
      },
      {
        "userId": 5,
        "name": "Alex",
        "address": "NY, BY"
      }
    ]
  }

  $scope.result_function();


}]);

app.directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel, ctrl) {
    if (!ngModel) return;
    
      var char;
      var regexp = /^[0-9]$/;
      element.on('keypress', (e) => {
       
        if (attrs.column === 'User Id') {
				
          char = String.fromCharCode(event.which)
          if (!regexp.test(char)) {
            event.preventDefault();
          }

        }
      });


    }
  };
}]);