JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="test">
  <div ng-repeat="(key,value) in data">
    [{{key + 1}}] --
    <div ng-if="value.children.length > 0">
      <div ng-repeat="item in value.children">
        <span>{{item}}</span> <span class="green" ng-bind-html="getMessage(item)"></span>
      </div>

    </div>
    <span ng-if="!(value.children.length > 0)">
    No children found!!
    </span>
    <br />
  </div>
</div>

CSS

.green {
  color: green;
}

JavaScript

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

app.controller('test', function($scope, $sce) {
  $scope.data = [{
    "id": 14,
    "discussion": 8,
    "parent": 0,
    "userid": 2,
    "subject": "communication skill discussion 2",
    "message": "<p>hi all to communication discussion 2 </p>",
    "children": [
      24,
      16,
      15
    ]
  }, {
    "id": 15,
    "discussion": 8,
    "parent": 14,
    "userid": 2,
    "subject": "Re: communication skill discussion 2",
    "message": "<p>hiiiiiiiiii</p>",
    "children": [
      25,
      23
    ],
  }, {
    "id": 23,
    "discussion": 8,
    "parent": 15,
    "userid": 2,
    "created": 1461562317,
    "modified": 1461562317,
    "mailed": 0,
    "subject": "Re: communication skill discussion 2",
    "message": "<p>helloooo</p>",
    "children": [

    ],
  }];

  $scope.getMessage = function(itemId) {
    var flag = true;
    var msg;
    angular.forEach($scope.data, function(value, key) {
      if (flag && value.id == itemId) {
        flag = false;
        msg = value.message;
      } 
    });
    return $sce.trustAsHtml(msg);
  }
});