<div class="container">
<div class="row" ng-repeat="cmts in courCmt.argument"
ng-init="getUserInfo(cmts)">
<div class="col-sm-1 col-xs-2">
<div class="thumbnail">
<img class="img-responsive user-image"
ng-src="{{cmts.imagePath || 'defaultimage.png'}} ">
</div>
</div>
<div class="col-sm-11 col-xs-10" style="padding-left: 10px">
<div>
<div>
<strong>{{cmts.username}}</strong>
</div>
<div>{{cmts.commentText}}</div>
<small><a style="color: #0088cc" >Like</a>    <a
class="reply-btn" style="color: #0088cc;" ng-click="replyComment(cmts.cId,cmts)" >Reply</a>    <span
class="text-muted"> {{cmts.createDate | date:'MMM d, y h:mm:ss a '}}</span></small><br>
<strong><a id="quantity{{cmts.cId}}" style="color: #0088cc" ng-click="showAllReplies(cmts.cId)" ng-if ="cmts.replies.length>1"><span class="glyphicon glyphicon-menu-down"></span>See all {{cmts.replies.length}} replies </a></strong>
</div>
<div class="row" ng-repeat="rep in cmts.replies | orderBy : '-createDate' | limitTo:quantity{{cmts.cId}}"
ng-init="getUserReplyInfo(rep)" style="padding-left: 40px">
<div class="col-sm-1 col-xs-2">
<div class="thumbnail" style="max-width: 70%; max-height: 70%">
<img class="img-responsive user-photo"
ng-src="{{rep.imagePath || 'defaultimage.png'}}">
</div>
</div>
<div class="col-sm-11 col-xs-10" style="padding-left: 0px">
<div>
<div>
<strong>{{rep.username}}</strong>
</div>
<div>{{rep.replyText}}</div>
<small> <a style="color: #0088cc">Like</a>      
<span class="text-muted">{{rep.createDate | date:'MMM d,y h:mm:ss a'}}</span></small>
</div>
</div>
</div>
<strong><a ng-hide="toggleValue{{cmts.cId}}" id="quantity1{{cmts.cId}}" style="color: #0088cc" ng-click="hideMoreReplies(cmts)">Show Less</a></strong>
<div id="addReply{{cmts.cId}}" style="display:none">
<div class="col-sm-1 col-xs-2" >
<img
ng-src="{{profileImagePath || 'defaultimage.png'}} " style="max-width: 60%; max-height: 60%">
</div>
<div class="col-sm-11 col-xs-10">
<textarea ng-model="replyCommentText" class="form-control" rows="1"
style=" width: 95%" ng-enter="saveReply(replyCommentText,cmts.cId,cmts.courseArgumentId,cmts.userId,user.id)"></textarea>
</div>
</div>
</div>
</div>
</div>
<script>
$scope.showAllReplies = function(cmts){
$("#quantity"+cmts.cId).hide();
$("#quantity1"+cmts.cId).show();
$scope["toggleValue"+cmts.cId] = false;
$scope["quantity"+cmts.cId] ='';
}
$scope.hideMoreReplies = function(cmts){
$("#quantity1"+cmts.cId).hide();
$("#quantity"+cmts.cId).show();
$scope["toggleValue"+cmts.cId] = true;
$scope["quantity"+cmts.cId] = 1;
}
</script>