title: How to get angular ui-router's ui-sref to work, when inside a directive's template?
body: <p>Basically, I am trying to change/customize the behaviour of the ui.bootstrap.accordion. All is working, except for integration with ui-router.<br>
  Here's the way I want to use the accordion:</p>
  
  <pre><code>  &lt;accordion&gt; &lt;!-- this element is actually separate view in a parent state of the accordion-group's below.--&gt;
      &lt;accordion-group  ui-sref="site.home.newsID_1"&gt; &lt;!-- accordion-groups will be generated with ng-repeat.--&gt;
        &lt;accordion-heading&gt;
          News 1
        &lt;/accordion-heading&gt;
        &lt;p&gt;This is&lt;/p&gt;
      &lt;/accordion-group&gt;
      &lt;accordion-group  ui-sref="site.home.newsID_2"&gt;
        &lt;accordion-heading&gt;
          News 2
        &lt;/accordion-heading&gt;
        &lt;p&gt;Home News's&lt;/p&gt;
      &lt;/accordion-group&gt;
      &lt;accordion-group ui-sref="site.home.news.newsID_3"&gt;
        &lt;accordion-heading&gt;
          News 3
        &lt;/accordion-heading&gt;
        &lt;p&gt;Preview and navigation&lt;/p&gt;
      &lt;/accordion-group&gt;
    &lt;/accordion&gt;
  </code></pre>
  
  <p>Below's the modified template of the accordion:</p>
  
  <pre><code>&lt;div ng-mouseenter="isOpen = !isOpen" ng-mouseleave="isOpen = !isOpen"&gt;
    &lt;div class="accordion-group" ng-class="{transparentBackground: isClicked}"&gt;
  
        &lt;div class="accordion-heading"&gt;
          &lt;a id="link" ui-sref="site" class="accordion-toggle" ng-click="isClicked = !isClicked" accordion-transclude="heading"&gt;
            {{heading}}
          &lt;/a&gt;
        &lt;/div&gt;
  
      &lt;div class="accordion-body" collapse="!isOpen &amp;&amp; !isClicked"&gt;
        &lt;div class="accordion-inner" ng-transclude&gt;&lt;/div&gt;  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically the 'site.home.newsID_X' need to replace the 'site' value of ui-sref within the template. <br>
  My attempt was to set the value of ui-sref attribute via the 'element' parameter from the accordionGroup directive's linking function as shown below:<br></p>
  
  <pre><code>link: function(scope, element, attrs, accordionCtrl) {
    element.find('#link').attr("ui-sref", attrs.uiSref)
    [...]
  }
  </code></pre>
  
  <p>This does update the target ui-sref, but ui-router does not generate the corresponding href from the referenced state's url, so after the DOM is rendered I am getting </p>
  
  <pre><code> &lt;a ui-sref="site.home.newsID_1" href="#/site"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>instead of the expected</p>
  
  <pre><code> &lt;a ui-sref="site.home.newsID_1" href="#/site/home/newsID_1"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>What am I missing?<br>
  I appreciate your time,<br>
  Jared</p>