JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="myApp">
  Hello World!
  <div ng-controller="MyController as myCtrl">
    <ul>{{myCtrl.HTMLTree(myCtrl.myTree)}}</ul>
  </div>
</body>

JavaScript

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


myApp.controller('MyController', function($scope) {
    var self = this;

  self.myTree = {
    "category": {
      "name": "A",
    },
    "children": [
      {
        "category": {
          "name": "B",
        },
        "children": []
      },
      {
        "category": {
          "name": "C",
        },
        "children": []
      }
    ]
  }
  
    self.HTMLTree = function(jsonTree) {
      var retStr = '<li>' + jsonTree.category.name;
      if (('children' in jsonTree) && (jsonTree.children.length > 0)) {
        retStr += '<ul>';
        for (childIndex = 0; childIndex <= jsonTree.children.length - 1; childIndex++)
          retStr += self.HTMLTree(jsonTree.children[childIndex]);
        retStr += '</ul>';
      }
      retStr += '</li>';
      return retStr
    }
  }
);