tabarray.html

<div ng-init="selected = { tab: 0 }"
     ng-model="modelArray" schema-validate="form"
     sf-field-model="sf-new-array"
     sf-new-array
     class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || 'left'}} {{form.htmlClass}}">
  <div ng-if="!form.tabType || form.tabType !== 'right'"
       ng-class="{'col-xs-3': !form.tabType || form.tabType === 'left'}">
    <ol class="nav nav-tabs"
        ng-class="{ 'tabs-left': !form.tabType || form.tabType === 'left'}"
        sf-field-model ui-sortable="form.sortOptions">
      <li sf-field-model="ng-repeat"
          ng-repeat="item in $$value$$ track by $index"
          ng-click="$event.preventDefault() || (selected.tab = $index)"
          ng-class="{active: selected.tab === $index}">
          <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
      </li>
      <li ng-hide="form.readonly || form.add === null"
          ng-disabled="form.schema.maxItems <= modelArray.length"
          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
        <a href="#">
          <i class="glyphicon glyphicon-plus"></i>
          {{ form.add || 'Add'}}
          </a>
      </li>
    </ol>
  </div>

  <div ng-class="{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}">
    <div class="tab-content {{form.fieldHtmlClass}}">
      <div class="tab-pane clearfix {{ 'tab' + selected.tab + ' index' + $index }}"
           sf-field-model="ng-repeat"
           ng-repeat="item in $$value$$ track by $index"
           ng-show="selected.tab === $index"
           ng-class="{active: selected.tab === $index}">

           <div schema-form-array-items></div>

           <button ng-hide="form.readonly || form.remove === null"
                   ng-click="selected.tab = deleteFromArray($index).length - 1"
                   ng-disabled="form.schema.minItems >= modelArray.length"
                   type="button"
                   class="btn {{ form.style.remove || 'btn-default' }} pull-right">
             <i class="glyphicon glyphicon-trash"></i>
             {{ form.remove || 'Remove'}}
           </button>
      </div>
      <div class="help-block"
           ng-show="(hasError() && errorMessage(schemaError())) || form.description"
           ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
      </div>
    </div>
  </div>

  <div ng-if="form.tabType === 'right'" class="col-xs-3">
    <ul class="nav nav-tabs tabs-right">
      <li  sf-field-model="ng-repeat"
          ng-repeat="item in $$value$$ track by $index"
          ng-click="$event.preventDefault() || (selected.tab = $index)"
          ng-class="{active: selected.tab === $index}">
          <a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
      </li>
      <li ng-hide="form.readonly || form.add === null"
          ng-disabled="form.schema.maxItems <= modelArray.length"
          ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
        <a href="#">
          <i class="glyphicon glyphicon-plus"></i>
          {{ form.add || 'Add'}}
          </a>
      </li>
    </ul>
  </div>

</div>