title: Aurelia: element is not binding into custom-element (bindable template)
body: <p>Here is the custom-element:</p>
  
  <pre><code>&lt;template bindable="menuItem"&gt;
      &lt;a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
          ${menuItem}&amp;nbsp;&lt;span class="caret"&gt;
          &lt;/span&gt;&lt;/a&gt;
      &lt;ul repeat.for="navModel of menuItem.navModels" class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href.bind="navModel.href"&gt;${navModel.name}&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and here is how I am calling it:</p>
  
  <pre><code>&lt;template&gt;
      &lt;require from="./menu-bar-dd-item.html"&gt;&lt;/require&gt;
      &lt;require from="./menu-bar-link-item.html"&gt;&lt;/require&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="${menuItem.navModels ? 'dropdown' : navModel.isActive ? 'active' : ''}" repeat.for="menuItem of menuItems"&gt;
              &lt;menu-bar-link-item if.one-time="!menuItem.navModels" nav-model="menuItem" &gt;&lt;/menu-bar-link-item&gt;
              &lt;menu-bar-dd-item if.one-time="menuItem.navModels" menu-item="menuItem" &gt;&lt;/menu-bar-dd-item&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The issue is that in the custom-element the binding ${menuItem} is evaluating to the string 'menuItem'. It looks like menuItem is just null inside the template (because the for loop also has no iterations even though the menuItem being passed in has multiple navModels). It looks like somehow the menuItem is not being bound into the component.</p>