Check out this solution that might help you with your problem.
An Angular application along with a controller is provided below:
var myApp=angular.module('myApp',[]);
myApp.controller('BlogController',function(){
this.details = [
{title: 'I Love Food',
author: 'Jane Dane',
date: 'Sep 27, 2015',
categories: [{name:'Food', class: ' label-danger'}, {name:'Ipsum', class: ' label-primary'}],
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
},
{title: 'I Love World',
author: 'Jane Dane',
date: 'Nov 12, 2015',
categories: [{name:'Nature', class: ' label-warning'}, {name:'Ipsum', class: ' label-primary'}],
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
}
]
});
Here's the corresponding HTML code:
<body ng-app="myApp">
<div class="col-sm-9" ng-controller="BlogController as blg">
<h4>
<small>RECENT POSTS</small>
</h4>
<hr />
<div ng-repeat="detail in blg.details">
<h2>{{detail.title}}</h2>
<p>{{detail.content}}</p>
<h5>
<span class="glyphicon glyphicon-time"></span>
Post by {{detail.author}}, {{detail.date}}.
</h5>
<h5>
<span ng-repeat="category in detail.categories" class="label {{category.class}}">{{category.name}}</span>
</h5>
<br />
</div>
</div>
</body>
Visual representation of the solution can be seen here.
You can view the full solution on Plunker.