var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.products = [
{prdName: 'all long', items: [{security: 'fb', price: '100'}, {security: 'im', price: '200'}]},
{prdName: 'long', items: [{security: 'net', price: '100'}, {security: 'fb', price: '200'}]},
{prdName: 'vr', items: [{security: 'ib', price: '100'}, {security: 'net', price: '200'}]}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table class="table table-bordered table-condensed">
<thead ng-repeat-start="prod in products">
<tr>
<th colspan="3">
{{prod.prdName}}
</th>
</tr>
<tr>
<th>Security</th>
<th>Price</th>
</tr>
</thead>
<tbody ng-repeat-end>
<tr ng-repeat="item in prod.items">
<td>{{item.security}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */