JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="TstCtrl">
<div ng-repeat="group in Model.Groups">
<span style="font-weight: bold">{{group.Name}}</span>
<div ng-repeat="filter in group.Filters" class="singleFilterWrapper">
<input type="checkbox" ng-model="filter.enabled" id="check_{{group.Name}}_{{filter.Name}}"><label for="check_{{group.Name}}_{{filter.Name}}"> {{filter.Name}}</label>
<select ng-disabled="!filter.enabled">
<option ng-repeat="value in filter.Values"> {{value}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
JavaScript
function TstCtrl($scope) {
setTimeout(function() {
$scope.Model = {
};
var dt = new Array();
for (var i = 0; i < 6; i++) {
var group = {
Name: "Group "+i,
Filters: new Array()
};
for (var j = 0; j < 30; j++) {
var filter = {
Name: "Filter " + j,
Values: new Array()
};
for (var k = 0; k < 15; k++) {
filter.Values.push(k);
}
group.Filters.push(filter);
}
dt.push(group);
}
alert('started');
$scope.Model.Groups = dt;
$scope.$digest();
alert('ended');
}, 10);
}