title: Error: Invalid state ref '' , when using ui-sref in angular
body: <p>I'm using the ui-router for the state transitions and I ran into an issue and not able to resolve it.</p>
  
  <p>When I use ui-sref to go to the child state it gives me this error</p>
  
  <blockquote>
    <p>Error: Invalid state ref ''</p>
  </blockquote>
  
  <p>This is my code:
  <strong>user.js (controller):</strong></p>
  
  <pre><code>&lt;a id="sim_'+row.simId+'" title="Click to go to SIM details" ui-sref="app.sims.subscriptions({userId:'+userId+',simId:\''+row.simId+'\'})"&gt;
  </code></pre>
  
  <p>This will get resolved and gets attached to a HTML page.</p>
  
  <p><strong>config.js</strong></p>
  
  <pre><code>.state('app.sims',{
              abstract:'true',
              url:'/sims/:userId/:simId',
              templateUrl:'app/tpl/app/sims.html',
              controller:'SIMsCtrl',
              controllerAs:'vm'
  })
  .state('app.sims.subscriptions',{
              url:'/subscriptions',
              templateUrl:'app/tpl/app/subscriptions.html',
              controller:'SubscriptionCtrl',
              controllerAs:'vm'
  })
  </code></pre>
  
  <p><strong>sims.js (controller):</strong></p>
  
  <pre><code>vm.simId=$stateParams.simId;
  vm.userId=$stateParams.userId;
  </code></pre>
  
  <p><strong>sims.html</strong></p>
  
  <pre><code>&lt;li&gt;
      &lt;a data-toggle="tab" ui-sref="app.sims.subscriptions" data-target="#" role="tab"&gt;Subscriptions&lt;span class="sm-nxt-ln"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>subscription.js (controller):</strong></p>
  
  <pre><code>var userId=$scope.$parent.vm.userId;
  var simId=$scope.$parent.vm.simId;
  </code></pre>
  
  <p>I'm getting the values in subscription.js. The userId and the simId is getting resolved but in the console I'm getting the invalid state error.</p>
  
  <p>How can I resolve this. Please help.</p>