title: ui-sref not working in nested views
body: <p>Homework I've done - reviewed almost 8-9 ui-sref related questions (how to, complex examples, etc.) on this site, the related plunks, Scotch.io, etc. I can't seem to figure why my code is not working. I've spent 6-7 hours debugging the app and I can't seem to find the issue. </p>
  
  <p>My page is divided into
  a) layout.html - this forces the bootstrap grid system
  b) app-navbar - nav bar on top (code is cut-n-paste of bootstrap example for now...)
  c) app-accordion - uses the ui bootstrap accordion to display n number of items
  d) app-right - right side comprises some UI elements and a ui-grid</p>
  
  <p>The ui-view for all elements render correctly ... i.e., the "index" state is being called in my controller. I added a couple of simple buttons in app-navbar.html just to debug... </p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a ui-sref="view1"&gt;View1&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a ui-sref="view2"&gt;View2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div ui-view="view-test"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>here's a snippet of my controller code:</p>
  
  <pre><code>        .state('view1', {
              url: '/view1',
              views: {
                  'view-test': {
                      templateUrl: 'view1.html',
                      controller: 'View1Ctrl'
                  }
              }
          })
  </code></pre>
  
  <p>When I hover over the buttons, I see that the .../view1 and 2 show up on the browser's footer but when I click them nothing happens. For now, the accordion still uses href but it stops working if I use ui-sref. Once I get past this, that's the next question ... how do you use ui-sref for controls like accordion?</p>
  
  <p>Any ideas on what might be going on? The plunk: <a href="http://plnkr.co/edit/c89j3eFvYyguMt0QznAI" rel="nofollow">http://plnkr.co/edit/c89j3eFvYyguMt0QznAI</a></p>