Как вставить редактируемую таблицу во все вкладки в angularjs?

Question

Я работаю над созданием представления вкладок с редактируемыми именами вкладок, используя javascript, bootstrap, angularjs с возможностью добавления / удаления вкладок в таблице на каждой вкладке (уже сделано). Мне трудно найти примеры, когда динамически редактируемая таблица со столбцом только для чтения помещается во все вкладки (пример снимка экрана ниже). Мне было интересно, если кто-то реализовал аналогичные или есть примеры, оцените вашу помощь. Кроме того, я приложил скриншоты представления таблицы для каждой вкладки магазина, вот ссылка на мой код https://codepen.io/nagak/pen/WWLONV

HTML

<code><div class="container">
  <div class="page-header">
    <h1>Stores Window</h1>
  </div>
  <h3>Actions:</h3>
  <ul class="list-unstyled">
    <li>Add new stores</li>
    <li>Edit store names</li>
    <li>Delete stores </li>

  </ul>
</div>
<div ng-app="tabApp" class="container">
  <div ng-controller="MainController" class="tab-container">
    <div class="ng-isolate-scope">
      <ul class="nav nav-tabs" data-as-sortable="" data-ng-model="tabs">
        <li ng-repeat="tab in tabs" data-as-sortable-item  ng-class="tab.active ? 'active' : ''">
          <a href="" ng-click="select(tab)" class="ng-binding" data-as-sortable-item-handle>{{tab.title}}</a>
        </li>
        <li class="uib-tab-last" data-toggle="modal" data-target="#CreateNewTabModal" ng-disabled="!hasLimit">
        <a href="#">+ Add New</a>
      </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane" ng-repeat="(index,tab) in tabs" ng-class="tab.active ? 'active' : ''">
          <p class="text-right">
            <button type="button" ng-click="EditTab(index)" class="btn btn-info">
              <i class="glyphicon glyphicon-pencil"></i>
            </button>
            <button type="button" ng-click="destroyTab(index)" ng-if="tabs.length > 1" class="btn btn-danger">
              <i class="glyphicon glyphicon-remove"></i>
            </button>
          </p>
          <p class="text-center ng-scope">{{tab.content}}</p>
        </div>
      </div>
    </div>

    <div id="CreateNewTabModal" tabindex="-1" role="dialog" class="modal fade">
      <form ng-submit="CreateNewTab()" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-4 form-group">
                <label>Store Name</label>
              </div>
              <div class="col-sm-8 form-group">
                <input type="text" ng-model="field.title" ng-focus="flag=false" class="form-control" autofocus/><small ng-if="flag" class="text-danger">{{message}}</small>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            <button type="submit" class="btn btn-primary">Create</button>
          </div>
        </div>
      </form>
    </div>
    <div id="EditTabModal" tabindex="-1" role="dialog" class="modal fade">
      <form ng-submit="UpdateTab()" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-4 form-group">
                <label>Store Name</label>
              </div>
              <div class="col-sm-8 form-group">
                <input type="text" ng-model="editableTitle" class="form-control" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Update</button>
          </div>
        </div>
      </form>
    </div>

    <br />
    <pre>{{tabs|json}}

1011 * CSS *

@import 'compass';
body {
  padding-top: 30px;
}

.tab-container {
  position: relative;
  .nav.nav-tabs {
    border-bottom: 0;
    z-index: 1;
    margin-bottom: 0;
    white-space: nowrap;
    display: block;
    > li {
      position: relative;
      background-color: #e9e7e4;
      border: 1px solid #b5b4b4;
      border-right: 0;
      color: #656d78;
      text-decoration: none;
      position: relative;
      display: block;
      padding: 0;
      float: left;
      @include border-radius(5px 15px 0 0);
      &:not(.uib-tab-last) {
        width: 200px
      }
      &.uib-tab-last {
        &[disabled="disabled"] {
          @include box-shadow(none);
          @include opacity(.6);
          &,
          > a {
            cursor: default;  
          }
        }
      }
      &:after {
        content: "";
        position: absolute;
        top: -1px;
        bottom: -1px;
        right: -25px;
        width: 40px;
        background-color: #e9e7e4;
        z-index: 1;
        border: 1px solid #b5b4b4;
        border-left: 0;
        @include border-radius(0 50px 0 0);
      }
      a {
        color: inherit;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        background-color: transparent;
        @include border-radius(0);
        border: 0;
        padding: 10px 20px 10px 30px;
        font-size: 16px;
      }
      &.active {
        a {
          color: #60b7d4;
          text-decoration: underline;   
        }
      }
      &:not(:last-child) {
        a {
        &:hover {
          color: #60b7d4;
          text-decoration: underline;            
          }
        }
      }
      &.ui-sortable-placeholder {
        height: 44px;
        &,
        &:after {
          // #F9BF6D
          background-color: #f4f2ef;
          border-color: #b5b4b4 #b5b4b4 #f4f2ef;
        }
      }
    }
    &.is-sorting {
      li[data-toggle="modal"] {
        @include opacity(.3);
      }
    }
  }
}



.tab-container {
  .nav.nav-tabs {
    > li {
      .static-tab {
        color: red;
      }
    }
  }
}

.tab-content {
  background-color: #f4f2ef;
  border: 1px solid #b5b4b4;
  padding: 15px 30px;
  //margin-left: 41px;
}

JS

(function(angular) {
  'use strict';
  angular
    .module('tabApp', ['ui.bootstrap', 'as.sortable'])
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', '$timeout'];
  function MainController($scope, $timeout) {
    $scope.selectedTab = null;
    var sortableEle;
    $scope.tabs = [{
      title: 'Store 1',
      content: 'store 1  table',
      active: true
    }];
    $scope.field = {
      title: ""
    };
    $scope.flag = false;
    $scope.hasLimit = true;
    $scope.CreateNewTab = function() {      
      if ($scope.field.title === "") {
        $scope.flag = true;
        $scope.message = "Required field";
      } else {
        $scope.flag = false;
        angular.forEach($scope.tabs, function(value, key) {
          if ($scope.field.title == value.title) {
            $scope.flag = true;
          }
        });
        if (!$scope.flag) {
          if ($scope.tabs.length == 400) {
            $scope.hasLimit = false;
          }
          $scope.tabs.push({
            title: $scope.field.title,
            content: 'store table',
            active: true
          });
          $('#CreateNewTabModal').modal('hide');
          $scope.select($scope.tabs[$scope.tabs.length -1]);
          console.log($scope.tabs);
        } else {
          $scope.message = '"' + $scope.field.title + '" store already exists!';
        }
        $scope.field.title = "";
      }    
    };
    $scope.select = function(tab){
        angular.forEach($scope.tabs, function(value, key) {
          value.active = false;
        });
       tab.active = true;
    };
    $scope.EditTab = function(index) {
      $scope.selectedTab = $scope.tabs[index];
      $scope.editableTitle = $scope.selectedTab.title;
      $("#EditTabModal").modal('show');
    };
    $scope.UpdateTab = function() {
      $scope.selectedTab.title = $scope.editableTitle;
      $("#EditTabModal").modal('hide');
    };
    $scope.destroyTab = function(index) {
      $scope.tabs.splice(index, 1);
      $scope.tabs[0].active = true;
      console.log($scope.tabs);
      if ($scope.tabs.length < 5) {
        $scope.hasLimit = true;
      }
    };
  }
})(window.angular);

.