Dynamic Angular.js menu

Question

I am trying to build a dynamic menu using anuglar.js and bootstrap. This menu needs to have a dropdown ability. I've gotten the basic menu down but now I'm trying to add a dropdown link and I can't get the options to generate correctly.

I have a variable with the menu items like so:

var nav = [

    {
        display: 'Home', 
        link: '#/',
        drop: false,
    },
    {
        display: 'Categories', 
        link: '#/', 
        drop: true,
        sub: [
            {
                display: 'Sub 1',
                link: '#/'
            },
            {
                display: 'Sub 2',
                link: '#/'
            },
            {
                display: 'Sub 3',
                link: '#/'
            }
        ]
    }

];

I want a dropdown menu to generate of the sub items when drop is true and just a regular menu item when it is false .

This is my HTML so far:

<ul class="nav navbar-nav">
    <li class="dropdown" ng-repeat="nav in nav" ng-if="drop == nav.drop">
      <a class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
        {{nav.display}}
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
      </ul>
    </li>
    <li ng-if="drop != nav.drop" ng-repeat="nav in nav">
      <a href="{{nav.link}}">{{nav.display}}</a>
    </li>
</ul>

Right now everything is generating as a normal link.

Answer 1

I think the ng-if is the problem. Change this:

ng-if="drop == nav.drop"

to this:

ng-if="nav.drop"

and this:

ng-if="drop != nav.drop"

to this:

ng-if="!nav.drop"

Incidentally, I agree with the commenter that ng-repeat="nav in nav" is confusing.

EDIT:

How to get one list instead of two:

<ul class="nav navbar-nav">
  <li class="dropdown" ng-repeat="nav in nav">
    <a ng-if="!nav.drop" href="{{nav.link}}">{{nav.display}}</a>        
    <a ng-if="nav.drop" class="dropdown-toggle" data-toggle="dropdown" href="{{nav.link}}">
      {{nav.display}}
      <b class="caret"></b>
    </a>
    <ul ng-if="nav.drop" class="dropdown-menu">
      <li ng-repeat="sub in nav.sub"><a href="{{sub.link}}">{{sub.display}}</a></li>
    </ul>
  </li>
</ul>