JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<div ng-app="myApp" ng-controller="myController">
    <div>
        Please Selct you Business Category:
    <select ng-change="categoryChanged()" 
        ng-model="selectedCategory" 
        ng-options="obj as obj.category_name for obj in data.data">
        <option value="">--Business Category--</option>
    </select>
    </div>
    <div  ng-show="selectedCategory">
        Please Selct you sub-category:
    <select ng-model="selectedSubCategory"  ng-options="object as object.name for object in subCategoryList">
        <option value="">--Business Sub-Category--</option>
    </select>
    </div>
     <div  ng-show="selectedSubCategory">
         <table>
             <tr><td>Category Name:</td><td>{{selectedCategory.category_name}}</td></tr>
             <tr><td>Category ID:</td><td>{{selectedCategory.category_id}}</td></tr>
             <tr><td>Sub Category Name:</td><td>{{selectedSubCategory.name}}</td></tr>
             <tr><td>Sub Category ID:</td><td>{{selectedSubCategory.id}}</td></tr>
         </table>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller("myController", ["$scope", function (scope) {
    scope.selectedCategory = null;
    scope.categoryChanged = function(){
        var subCategory;
        scope.selectedSubCategory = null;
        scope.subCategoryList = [];
        
        if(scope.selectedCategory === null || scope.selectedCategory === undefined){
            return;
        }
        
        for(var key in scope.selectedCategory.subCategories){
            subCategory = {};
            subCategory.id = key;
            subCategory.name = scope.selectedCategory.subCategories[key];
            console.log(subCategory);
            scope.subCategoryList.push(subCategory)
        }
    }
    scope.data = {
    "data":[{
        "category_id": "1",
        "category_name": "Agriculture",
        "subCategories":{
            "01":"Grain",
            "02":"Fruit",
            "03":"Vegetables",
            "04":"Beans",
            "05":"Mushrooms & Truffles",
            "06":"Nuts & Kernels"
        }
        },
        {
        "category_id": "2",
        "category_name": "Apparel and Fashion",
        "subCategories":{
            "01":"Eyewear, Eyeglasses, Sunglasses",
            "02":"Designer Bags & Handbags",
            "03":"Footwear",
            "04":"Industrial Clothing, Safety Clothes and Other",
            "05":"Ladies Apparel & Garments",
            "06":"Infant wear and related items"
        }
    }],
    "messages":[{
        "errorCode": "2423423",
        "msg": "Error Message",
        "severity": "error"
    }]
};
    console.log(scope.data);
}]);