如何在angularjs中创建分组的x-editable下拉列表？

Question

我在项目中使用了x-editable表。我需要将下拉列表分组如下。

全部
  名人
     -cricketer
     -actor
  普通的 在名人之下，我有板球运动员，演员等，名人的子类别将通过远程api获得。但是三个主要群体应该由当地人来获得。当我向名人下的服务器添加新的子类别时，它应该归于名人。如何做到这一点。谁能帮帮我吗。
的 HTML

    $scope.showCategories = function(user) {
        var categoryName;
        var selected = [];
        if (user.category_id) {
            for (var j = 0; j < $scope.categories.length; j++) {
                if (user.category_id == $scope.categories[j]._id) {
                    categoryName = $scope.categories[j].name;

                }
            }
            selected = $filter('filter')($scope.categories, {
                value: categoryName
            });

            return categoryName;
        }
        return selected.length ? selected[0]._id : 'Not set';
    };

控制器

$('input[name=subscription_plan_radio]:checked').parent().next().find('h3').html()