How to generate properties of array with some default value while doing ng repeat?

Question

Below is my array :

$scope.parent.cars1 = ["Saab", "BMW"]; // There are more than 1000 records in this array

$scope.child.Cars1 = [];

Now I am trying to assign $scope.parent.cars1 to $scope.child.Cars1 but would like to have 3 properties in my $scope.child.Cars1 array i.e name, operation and selected and by default operation property will be 1 and selected property will be true.

Code :

$scope.child = {};
if ($scope.child.Cars1 == undefined)
    $scope.child.Cars1 = [];

angular.forEach($scope.parent.Cars1, function(obj, key) {
    $scope.child.Cars1.push({
            name: obj,
            operation: 1, // this value is used to tick all radio button of clear and save
            selected: true // this value is used to check all checkbox to true by default
    });
})

Now as my records $scope.parent.Cars1 contains thousands of records, so my browser gets hang because I am using this $scope.child.Cars1 on my view to display records like below:

<tr ng-repeat="item in child.Cars1 | myfilter : searchitem">
     <td>
         <input ng-model="item.selected" type="checkbox" name="a{{$index}}" id="a{{$index}}">
     </td>
     <td>
          <div>
             <input type="radio" ng-model="item.operation" value="0" name="b{{$index }}" id="b{{$index}}">Clear
          </div>
          <div>
             <input type="radio" ng-model="item.operation" value="1" name="b{{$index }}" id="b{{$index}}">Clear and Save
          </div>
     </td>
 </tr>;

Update : I am trying to avoid the process given below, so that browser doesn't get hanged because of huge number of records:

angular.forEach($scope.parent.Cars1, function(obj, key) {
        $scope.child.Cars1.push({
                name: obj,
                operation: 1, // this value is used to tick all radio button to true by default
                selected: true // this value is used to check all checkbox to true by default
        });
});

Plunker

Using @Bear plunker this happens:

Answer 1

I've update and cleanup my PLUNKER with a real 8000 records...
I have to say that if you don't use pagination o some technique that only write a certain quantity of records in the DOM, you probably have a bad perfomance.

As a advice to improve better perfomace:

• Try to do much work as you can in local vars before of binding the array
• Work with a local copy of the whole array and only bind a limit quantity of records in the screen. (Use javascript slice(start, end))
• add track by $index (angular docs ng-repeat)
• When you are using angular 1.3+, disable two-way data binding if isn't necessary (angularJs one-way data binding)

My code:

CONTROLLER JS:

var bigArray = ["Dandai", "Immātīn", "Oefatu" ...];
var itemsLocal = []; //Local copy of the items to work

var PAGE_SIZE = 250;
var TOTAL_RECORDS = bigArray.length;

var start = 0;
var end = PAGE_SIZE;

$scope.items = []; //Items to repeat in screen

$scope.loadData = loadData;
$scope.prevPage = prevPage;
$scope.nextPage = nextPage;

transformData();
loadData();

function transformData() {
    for (var i = 0; i < TOTAL_RECORDS; i++) {
      itemsLocal.push({
        name: bigArray[i],
        selected: true,
        operation: 1
      });
    }
}

function loadData() {
    $scope.items = itemsLocal.slice(start, end); //repeat only certain part of the data
}

function prevPage() {
    if (start < PAGE_SIZE) 
        return;

    start = start - PAGE_SIZE;
    end = end - PAGE_SIZE;
    loadData();
}


function nextPage() {
    if (end >= TOTAL_RECORDS) 
        return;

    start = start + PAGE_SIZE;
    end = end + PAGE_SIZE;
    loadData();
}

HTML:

<div>
    <button type="button" ng-click="prevPage()">Load Previous</button>
    <button type="button" ng-click="nextPage()">Load Next</button>
</div>

<hr/>

<table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items track by $index">
        <td>
          <input ng-model="item.selected" type="checkbox"> {{ item.name }}
        </td>
        <td>
          <div>
            <input type="radio" class="radio-custom" ng-model="item.operation" value="0">Clear
          </div>
          <div>
            <input type="radio" class="radio-custom" ng-model="item.operation" value="1">Clear and Save
          </div>
        </td>
      </tr>
    </tbody>
</table>