title: "Cannot transition to abstract state'" when trying to highlight parent in sidebar
body: <p>I am using angular UI-Router and bootstrap collapse panels to build a sidebar for a style guide. My sidebar as is "works" but I'm getting a </p>
  
  <blockquote>
    <p><code>Error: Cannot transition to abstract state 'parent'</code> </p>
  </blockquote>
  
  <p>when clicking the child states. In my real solution there are many parents with child groupings and the parents truly are abstract <em>(i.e. they don't represent a physical page or state)</em>. I know I can't link directly to the parent states, and I don't believe I am, I just need to set their <code>ui-sref</code> in the parent panel so that I can get the parent to stay open by setting the <code>ui-sref-active</code> attribute.</p>
  
  <p>I have an example running on plunker: <a href="http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview" rel="nofollow">http://plnkr.co/edit/bnvGcaOvzW4que8g3vh7?p=preview</a></p>
  
  <p>code for reference:</p>
  
  <pre><code>angular.module('app', ['ui.router'])
          .config(function($stateProvider, $urlRouterProvider){
              $urlRouterProvider.otherwise("/");
              $stateProvider
                  .state('home', {
                      url: "/",
                      templateUrl: "layout.html"
                  })
                  .state('parent', {
                      abstract: true,
                      url: '/parent',
                      templateUrl: "layout.html"
                  })
                  .state('parent.child', {
                      url: "/child",
                      templateUrl: "child.html"
                  })
          });
  </code></pre>
  
  <p>layout.html</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-3"&gt;
            &lt;a ui-sref="home"&gt;Home&lt;/a&gt;
             &lt;div class="panel-group" id="sidebar"&gt;
                &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;
                    &lt;h4 class="panel-title"&gt;
                        &lt;a data-toggle="collapse"  data-parent="#sidebar" data-target="#parent"
                     class="collapsed"&gt;Parent&lt;/a&gt;
                    &lt;/h4&gt;
                  &lt;/div&gt;
                &lt;div id="parent" ui-sref="parent" class="panel-collapse collapse" ui-sref-active="in"&gt;
                  &lt;div class="list-group"&gt;
                      &lt;a ui-sref="parent.child" ui-sref-active="active" class="list-group-item"&gt;Child&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-9"&gt;
              &lt;div ui-view&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>