JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<html ng-app="test">
    <body>
<div class="category" ng-controller="MainCtrl">
    <select ng-model="category">
        <option ng-repeat="category in categories | filterWithItems:false">{{ category.name }}</option>
         <optgroup ng-repeat="category in categories | filterWithItems:true" label="{{ category.name }}">
            <option ng-repeat="subCat in category.items">{{ subCat.name }}</option>
        </optgroup>

    <select>
</div>
    </body>
    </html>

JavaScript

var app = angular.module("test", [], function() {})
.filter("filterWithItems", function() {
    return function(categories, present) {
        return $.grep(categories, function(category) {
            if (present) {
             return category.items != undefined
            } else {
                return category.items == undefined
            }
        })
    }
})
         
app.controller('MainCtrl', function($scope) {
  $scope.categories = [{"id":"Cart","name":"Ma commande"},{"id":18,"name":"Menus"},{"id":14,"name":"Entr\u00e9es"},{"id":5,"name":"Plats","items":[{"id":7,"name":"Viandes"},{"id":8,"name":"Poissons"},{"id":11,"name":"Pizzas"}]},{"id":15,"name":"Desserts"},{"id":17,"name":"Boissons","items":[{"id":1,"name":"Alcoolis\u00e9es"},{"id":3,"name":"Sans alcool"}]}]
})