Why won't this display in my Angular/Laravel project?

I am hoping this is something really silly (and if so, thanks and sorry!) but I am stumped by this.

I am trying to use the example here - http://ift.tt/2cBmthm to create a drop down menu in my Angular project that has submenus.

I have added this to my view;

<div class="menu">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
   <li ng-repeat="item in items" 
       ng-class="{'dropdown-submenu': item.submenu && item.submenu.length}">        
        <a href="@">@</a>
       <ul ng-if="item.submenu && item.submenu.length" 
           class="dropdown-menu">
         <li ng-repeat="subitem in item.submenu">
           <a href="@">@</a>
         </li>
       </ul>
   </li>
</ul>
</div>

And this in my controller;

   $scope.items = [
    {
        name: "Menu Item 1",
        link: "#main1",
        submenu: null
    },
    {
        name: "Menu Item 2",
        link: "#main2",
        submenu: null
    },
    {
        name: "Menu Item 3",
        link: "#main3",
        submenu: [
            {
                name: "Sub Item 1",
                link: "#sub1"
            },
            {
                name: "Sub Item 2",
                link: "#sub2"
            }
        ]
    }
    ];

Nothing renders on page and no errors. When I view the page source from the browser I get this;

<div class="menu">
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     <li ng-repeat="item in items" ng-class="{'dropdown-submenu': item.submenu && item.submenu.length}"><a href=""></a>
    <ul ng-if="item.submenu && item.submenu.length" class="dropdown-menu">
        <li ng-repeat="subitem in item.submenu"><a href=""></a></li>
    </ul>
    </li>
  </ul>
 </div>

But if I view the Elements in Chrome Dev Tools, I can see the ng-repeat executing. However, nothing shows.

Huh?

via Chebli Mohamed