Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-controller="MyCtrl">

  <div ng-repeat="message in messages" ng-class="{'sent': userId == message.id, 'received': userId != message.id}">           
    <div class="message1" ng-if="checkPrev($index)">        
        index{{$index}}-->> {{message.name}}* 
         <span ng-if="append($index)">
           {{tempString}}
         </span>
    </div>
  </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
  $scope.checkPrev = function(currentIndex){
      var i = currentIndex;
      var isExist = true;
      while(i > 0){
      if($scope.messages[currentIndex].id == $scope.messages[i-1].id){
             isExist = false;
        }
        i = i-1;
      }
      return isExist;
 }
 
  $scope.append = function(currentIndex){
      var i = currentIndex;
     $scope.tempString = "";
      while(i < $scope.messages.length-1){
        if($scope.messages[currentIndex].id == $scope.messages[i+1].id){
             $scope.tempString = $scope.tempString + " " + $scope.messages[i+1].name + " ";
        }
        i = i+1;
      }
      return true;
 }
 
    $scope.messages = [{
    id : 11,
    name : 'name11'
    },{
    id : 11,
    name : 'name12'
    },{
    id : 13,
    name : 'name13'
    },{
    id : 15,
    name : 'name14'
    },{
    id : 13,
    name : 'name15'
    }];
});