JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="MyApp" ng-controller="MainCtrl">
<ul ng-repeat="item in datalist">
<li ng:bind="item.filterName"></li>
<li nj-table data="item.filterData"></li>
</ul>
</div>
<!-- http://stackoverflow.com/questions/22757581/how-to-use-defined-text-ng-template-in-angularjs-directive -->
CSS
li {
list-style: none;
}
JavaScript
var app = angular.module("MyApp", []);
app.controller("MainCtrl", function($scope) {
var jsonData = {
"newServiceBundleTitle": "Bundle Title 1",
"softChildItemsList": [{
"checked": "true",
"name": "Extended Warranty",
"selected": "true",
"products": [{
"pogId": "123612",
"name": "Extended Warranty 1",
"supc": "121221312"
}, {
"pogId": "123613",
"name": "Extended Warranty 2",
"supc": "121641214"
}, {
"pogId": "123614",
"name": "Extended Warranty 3",
"supc": "121221312"
}, {
"pogId": "123615",
"name": "Extended Warranty 4",
"supc": "121221312"
}, {
"pogId": "123616",
"name": "Extended Warranty 5",
"supc": "121221312"
}, {
"pogId": "123617",
"name": "Extended Warranty 6",
"supc": "121221312"
}, {
"pogId": "123618",
"name": "Extended Warranty 7",
"supc": "121221312"
}, {
"pogId": "123619",
"name": "Extended Warranty 8",
"supc": "121221312"
}]
}, {
"checked": "true",
"name": "Liquid Protection",
"selected": "false",
"products": [{
"pogId": "516",
"name": "Liquid Protection 1",
"supc": "121221312"
}, {
"pogId": "517",
"name": "Liquid Protection 2",
"supc": "121641214"
},{
"pogId": "518",
"name": "Liquid Protection 3",
"supc": "121641216"
}]
}, {
"checked": "false",
"name": "Item 3",
"selected": "false",
"products": [{
"pogId": "12354321",
"name": "Item 3 Product 1",
"supc": "121221312"
}, {
"pogId": "123654321",
"name": "Item 3 Product 2",
"supc": "121641214"
}]
}]
};
$scope.datalist = [];
jsonData.softChildItemsList.forEach(function(obj) {
$scope.datalist.push({
"filterName":...