AngularJS Ng-repeat html separators / dividers

Question

I'm, quite new to angular. I have a list item populated by some data :

<li ng-repeat="content in contents">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>

and in my controller i am looping through the dates and formatting like :

angular.forEach($scope.contents, function(item){
                           item.Appointment = moment(item.Appointment).format('MMMM Do YYYY'); 

                       })

Im trying to add a html divider to seperate the appointments by date, so in the list it would say "today" then some appointments, "tommorow", "next week" etc.

Is this possible with angular..ive been trying to do this for a while.

Answer 1

I have used filters below. Instead of today, tomorrow and next week in my code, you can put in your conditions.

<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>
<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>
<li ng-repeat="content in contents|filter:filterFn">
        <a class="item" href="#">
    <p><strong>{{content.Company}}</strong></p>
    <p>{{content.Town}}, {{content.PostCode}}</p>
    <p>{{content.Appointment}} at {{content.txtTime}}</p>
  </a>
</li>

In JS:

$scope.filterFn = function()
{
    // Do something

    // return something
};

Answer 2

you can use angular-timeago component to accomplish this, link