<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.1" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyController">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>
<!-- COLLAPSE -->
</th>
<th>ID</th>
<th>Name</th>
<th>Roles</th>
<th>Deletion</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="model in data">
<td>
<!-- COLLAPSE -->
</td>
<td>{{model.id}}</td>
<td>{{model.name}}</td>
<td>
{{model.roles.length}}
<div ng-include="'_roles.html'"></div>
</td>
<td>{{model.del}}</td>
</tr>
</tbody>
<tbody></tbody>
</table>
</body>
</html>
angular.module('myApp',[]).controller('MyController', ['$scope', function ($scope) {
$scope.data = [
{
"id": 10,
"name": "Platform A",
"roles": [
{
"id": 1,
"name": "Project Manager"
},
{
"id": 2,
"name": "Administrator"
}
],
"del": true
},
{
"id": 12,
"name": "Platform B",
"roles": [
{
"id": 2,
"name": "Administrator"
}
],
"del": true
}
];
}]);
/* Styles go here */
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr ng-repeat="roles in model.roles">
<td>{{roles.id}}</td>
<td>{{roles.name}}</td>
</tr>
</tbody>
<tbody></tbody>
</table>