title: AngularJS + UI-Router: See if href or ui-sref matches a state
body: <p>So currently, I am using UI-Router to manage a set of tab directives. By tabs, I mean this UI paradigm:  <a href="http://www.hollance.com/wp-content/uploads/2011/11/Screenshot.png" rel="nofollow">http://www.hollance.com/wp-content/uploads/2011/11/Screenshot.png</a></p>
  
  <p>Each tab is able to have a <code>title</code>, an <code>icon</code>, and a <code>href</code> or <code>ui-sref</code> associated with it.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;my-tabs&gt;
    &lt;my-tab title="Tab 1" href="#/tab1"&gt;
      Content when tab 1 is active!
    &lt;/my-tab&gt;
    &lt;my-tab title="Tab 2" ui-sref="tabs.numberTwo()"&gt;
      Content when tab 2 is active!
    &lt;/my-tab&gt;
  &lt;/my-tabs&gt;
  </code></pre>
  
  <p>Anyway, the main issue is that when the state is changed programatically or through a browser refresh, I want to be able to know <em>which</em> tab to select, based on either the <code>ui-sref</code> or <code>href</code> attribute.  <code>$state.(is|includes|contains)</code> don't seem to do what I need: I can't give <code>$state.is</code> a <code>href</code> and ask if it matches the current state - neither can I give it a ui-sref.</p>
  
  <p>It's possible I could add a <code>stateName</code> attribute or the like to the tab as well, but I would rather not do that if I don't have to.</p>
  
  <p>Basically, I would love to be able to do this in the tab directive:</p>
  
  <pre><code>$rootScope.$on('$stateChangeSuccess', function() {
     if ($state.matchesHref(attrs.href) || $state.matchesSref(attrs.uiSref)) {
      selectThisTab();
    }
  });
  </code></pre>
  
  <p>Any ideas at all to do this would be welcome! </p>