title: Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly
body: <p>i need this <img src="https://i.stack.imgur.com/6CGaR.png" alt="enter image description here"></p>
  
  <p>this is the controller code:</p>
  
  <pre><code>$scope.sideNavMenu =
  {
      title: "User Manual",
      subMenu: [
      {
          title: "Title one",
          link: "index/titleone.html",
          icon:"fa fa-caret-down",
          subMenu: []
      },
      {
          title: "Basic",
          link: "index/basic/basic.html",
          icon:"fa fa-caret-down",
          subMenu: [
          {
              title: "Basic Function",
              link: "index/basic/function.html",
              icon:"fa fa-caret-down",
              subMenu: []
          }]  
      }]
  };
  </code></pre>
  
  <p>i have been two weeks trying to solve. please any can help me?</p>
  
  <p>this is as far as it went</p>
  
  <pre><code>&lt;div id="MainMenu"&gt;
      &lt;div class="list-group panel"&gt;
          &lt;a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu"&gt;
          &lt;i class="fa fa-home"&gt;&lt;/i&gt;
          {{sideNavMenu.title}}
          &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;div ng-include ng-if="sideNavMenu.subMenu.length &gt; 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu"  src="'menuTemplate.html'"class="collapse" id="mainMenuContainer"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>template</p>
  
  <pre><code>&lt;script id="menuTemplate.html" type="text/ng-template"&gt;
  
      &lt;a ng-href="#{{ (data.subMenu.length &gt; 0) &amp;&amp; data.link || ''}}" class="list-group-item {{(data.subMenu.length &gt; 0) &amp;&amp; 'strong' || ''}}" data-toggle="collapse"  data-parent="{{data.link}}"&gt;{{data.title}}&lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;div ng-include ng-repeat="navMenu in data.subMenu" onload="data = navMenu" src="'menuTemplate.html'" class="list-group-submenu" ng-if="data.subMenu.length &gt; 0" ng-attr-id="{{data.link}}"&gt;
      &lt;/div&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/ONnvYj91HRSvboWUxDg2?p=preview" rel="noreferrer">here an example that i use to understand </a></p>
  
  <p>and this is the result</p>
  
  <p><img src="https://i.stack.imgur.com/P3x3r.png" alt="enter image description here"></p>
  
  <p>when i click nothing happends</p>
  
  <p>Console: Syntax error, unrecognized expression: index/titleone.html </p>