AngularJS ngrepeat — фильтр на основе данных области

Я пытаюсь создать выпадающее меню, используя angular ng-repeat. У меня есть объект jd с полем parent_id, которое указывает родительский узел, под которым должен отображаться этот узел. Мне нужна помощь, чтобы создать фильтр на основе предыдущих отфильтрованных данных, как показано в разметке

Мой код разметки:

<div >
    <ul class="nav nav-pills" data-ng-controller= "MenuController" >
        <li data-ng-class="{'active':getClass('/customers')}"
            data-ng-repeat="menuItem in menuItems | filter: { ParentId: '0' }" >
            <a href="#/customers"> {{ menuItem.Name }}    </a>
            **<ul>
                <li data-ng-repeat="menuItem1 in menuItems | filter: { ParentId: {{ menuItem1.ParentId }}  }">
                    {{ menuItem1.Name }}
                </li>
            </ul>**
        </li>
    </ul>
</div>

Мой сервис:

app.service('menuService', function () {
this.getMenuItems = function () {
    return  menuItems;
};
var menuItems = [
    {
        id: 'ABCDFER1', Name: 'Apperal', ParentId: 0, description: 'Beautifull Apparels'
    },
    {
        id: 'ABCDFER2', Name: 'Electronics', ParentId: 0, description: 'Electronic bargains'
    },
    {
        id: 'ABCDFER3', Name: 'Home & Kitchen', ParentId: 0, description: 'For your kitchen'
    },
    {
        id: 'ABCDFER4', Name: 'Services', ParentId: 0, description: 'Services for you'
    },
    {
        id: 'ABCDFER5', Name: 'Men', ParentId: 'ABCDFER1', description: 'Men Apperal'
    },
    {
        id: 'ABCDFER6', Name: 'Women', ParentId: 'ABCDFER1', description: 'Women Apperal'
    }
];

Мой контроллер:

$scope.menuItems = menuService.getMenuItems();