JSFiddle - React, Tailwind, and code Playground

by Melvin Stanly

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js" type="text/javascript"></script>
<body>
  <div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
      <li ng-repeat="category in categories">
        {{ category.title }}
        <ul ng-if="category.categories">
            <li ng-repeat="category in category.categories">
                {{ category.title }}
                <ul ng-if="category.categories">
                    <li ng-repeat="category in category.categories">
                        {{ category.title }}
                    </li>
                </ul>
            </li>
        </ul>
      </li>
    </ul> 
  </div>
</body>

<!-- <div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div> -->

JavaScript

var app = angular.module('myApp',['ui.sortable']);
app.controller('namesCtrl', function($scope) {
    $scope.categories = [
  { 
    title: 'Row 1',
    categories: [
      {
        title: 'Column 1',
      categories: [
          {
            title: 'element'
          },
        ]
      },
      {
        title: 'Column 2'
      }
    ]
  },
  {
    title: 'Row 2',
    categories: [
      {
        title: 'Column 1',
      },
      {
        title: 'Column 2'
      }
    ]
  }
];
});