To dynamically set pre-checked items, there are different approaches you can take.
Inhibit User Click
If you want a blue or grey checkbox, use one of the following methods.
Blue Checkbox
Replace
<input type="checkbox" ng-click=" $event.stopPropagation();" ng-model="item.checked">
with
<input type="checkbox" ng-click="toggleItem(item) $event.stopPropagation();" ng-model="item.checked">
This removes the click function that sets the checked value for the item.
Grey Checkbox
Simply disable the <input> element by using the disabled attribute, like this:
<input type="checkbox" disabled>
Scenario 1: Static Items List (pre-define items)
Add a checked:true key to the matching items in both $scope.items and $scope.items1.
$scope.items1 = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 9 },
{ id: 10 }
];
$scope.items = [
{ id: 1, checked:true },
{ id: 2, checked:true },
{ id: 3, checked:true },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9, checked:true },
{ id: 10, checked:true }
];
Scenario 2: Dynamically Identify Matching Items by ID
$scope.items1 = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 9 },
{ id: 10 }
];
$scope.items = [
{ id: 1},
{ id: 2},
{ id: 3},
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9},
{ id: 10}
];
for(var i=0; i<$scope.items.length; i++){
for(var k=0; k<$scope.items1.length; k++){
if($scope.items[i].id == $scope.items1[k].id){
$scope.items[i].checked = true;
break;
}
}
}