Как избежать проблем с производительностью в окне выбора - angularjs

Question

Если нажать кнопку «Добавить», на экране появится окно выбора. Я перепробовал много вариантов. но не может найти решение.

Сначала будет загружено левое меню.

если я нажму кнопку добавления, новая строка будет добавлена ​​вправо

Это код для JS действия кнопки

$scope.add = function(){
    $scope.selectedItemList.push({
        id: $scope.selectedItemList.length,
        name: '',
        age: '',
        selectedMap: {}
    });
};

Html

<div class="all-item-holder">
<div class="first-set">
<div class="custom-row">
<div class="custom-col"><a ng-click="add()" class="btn">ADD +</a></div>
<!-- /.custom-col-->
<div class="custom-col"
     ng-if="(selectedItemList && selectedItemList.length > 0)"
     ng-repeat="item in selectedItemList">
<div class="action-controls">
<div class="delete" ng-click="deleteRow(item)"><img src="../images/delete.png" /></div>
<div class="copy"><img src="../images/copy.png" /></div>
</div>
<!-- /.action-controls-->
</div>
</div>
<!-- /.custom-row-->
<div class="custom-row" ng-if="(selectedItemList && selectedItemList.length > 0)">
<div class="custom-col"><span>Name</span></div>
<!-- /.custom-col-->
<div class="custom-col" ng-repeat="item in selectedItemList">
   <input class="form-control" only-digits type="text"
          ng-model="item.material"/>
</div>
</div>
<div class="custom-row" ng-if="(selectedItemList && selectedItemList.length > 0)">
<div class="custom-col"><span>Age</span></div>
<!-- /.custom-col-->
<div class="custom-col" ng-repeat="item in selectedItemList">
    <input class="form-control" only-letters type="text"
           ng-model="item.gender"/>
</div>
</div>
<!-- /.custom-row-->
</div>
<!-- /.first-set-->
<div class="second-set">
<div class="second-set-heading toggle-action"><span class="expland">+</span><span class="collapse">&minus;</span> Characteristics</div>

<div class="holder-set toggle-box" ng-repeat='(key, value) in charListRef track by (key + $index)'>
<div class="set-title">{{key}}</div>
<div ng-if="value && key1" class="custom-row"
     ng-class="{single_item: (sizeOf(value) === 1)}"
     ng-repeat='(key1, value1) in value track by (key1 + $index)'>
<div class="custom-col" ng-if="value1 && key1"><span class="left-heading" data-toggle="tooltip" title="{{key1}}">{{key1}}</span></div>
<!-- /.custom-col-->
<div class="custom-col" ng-if="key1 && selectedItemList"
     ng-repeat="item in selectedItemList">
<select class="form-control" ng-model="item.selectedMap[key1]">
<option ng-repeat="o in value1.charValues track by (o + $index)" value="{{o}}">{{o}}</option>
</select>
</div>
</div>
</div></div>

Это ответ для n числа данных

{"response": {
    "A": {
        "A1": {
          "charValues": [
            "Andorra",
            "United Arab Emirates"
            ...
            ...
            ...
            n 
          ],
          "highlight": false
        },
        "A2": {
          "charValues": [
            "TEST1",
            "TEST2"
            ...
            ...
            ...
            n 
          ],
          "highlight": false
        },
        "A3": {
          "charValues": [
            "aluminum"
            ...
            ...
            ...
            n numbers
          ],
          "highlight": false
        }
    },
    "B": {
        "B1": {
          "charValues": [
            "No",
            "Yes"
            ...
            ...
            ...
            n numbers 
          ],
          "highlight": false
        },
        "B2": {
          "charValues": [
            "No",
            "Yes"
            ...
            ...
            ...
            n numbers 
          ],
          "highlight": false
        },
        "B3": {
          "charValues": [
            "Andorra",
            "United Arab Emirates"
            ...
            ...
            ...
            n numbers 
          ],
          "highlight": false
        }
        ...
        n numbers
    }
    ... n numbers
  }
}