ng-switch always true

Question

I want to hide uls if they are empty:

<div class="nav-manage clearfix" ng-app="linksManager">

    <script type="text/ng-template" id="inner-list.html">

        <li ng-repeat='link in link.submenu'>
            <a href="{{link.url}}">{{link.text}}</a>
            <div ng-switch on="link.submenu">
                <ul class="sortable" ng-include="'inner-list.html'">
            </div>
        </li>

    </script>

    <div class="links-arrange" ng-controller="linksRarrange">
        <ul class="sortable">
            <li ng-repeat="link in links">
                    <a href="{{link.url}}">{{link.text}}</a>
                    <div ng-switch on="link.submenu">
                        <ul class="sortable" ng-include="'inner-list.html'"></ul>
                    </div>
            </li>
        </ul>
    </div>

But they are not hidden regardless of the content in the ng-switch on

This is the data structure:

var linksData = [
    {
        text: 'Menu Item 1',
        url: '#'
    }, {
        text: 'Menu Item 2',
        url: '#',
        submenu: [
            {
                text: 'Sub-menu Item 3',
                url: '#'
            }, {
                text: 'Sub-menu Item 4',
                url: '#',
                submenu: // etc ...
];

Answer 1

The ng-switch works as ...well... a javascript switch, you need to use ng-switch on along with ng-switch-when for it to work (check the example here). However, in this case, ng-switch doesn't seem to be a good solution, what you need is something like AngularUI ui-if directive (src code here):

What? Remove elements from the DOM completely instead of just hiding it.

Why? In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

Example:

<div ui-if="link.submenu">

jsfiddle: http://jsfiddle.net/bmleite/fBLTd/