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="IndexController">

  <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 contenteditable="true">{{item.userId}}</td>
              <td contenteditable="true">{{item.name}}</td>
              <td 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("IndexController", ['$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) { 

      
    

    }
  };
}]);