title: Change both state and params dynamically in ui-sref
body: <p>Using ui-router I would like to set the ui-sref directive dynamically inside an ng-repeat, like so:</p>
  
  <pre><code>&lt;a ng-repeat="step in steps" ui-sref="{{step.state(step.param)}}"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Where <em>steps</em> is an array of "state objects" each with its own state and param object:</p>
  
  <pre><code>var steps = [{state: 'foo', param: {id: 'bar'}}, {...}];
  </code></pre>
  
  <p>That throws an interpolation error. On the other hand, passing only the state OR param dynamically works great per below:</p>
  
  <pre><code>// Pass only dynamic state works great
  &lt;a ng-repeat="step in steps" ui-sref="{{step.state}}"&gt;&lt;/a&gt;
  // Pass only dynamic param works great
  &lt;a ng-repeat="step in steps" ui-sref="foo(step.param)"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I tried using ng-click as a hacky workaround but it didn't play well with the ui-sref-active:</p>
  
  <pre><code>&lt;a ng-repeat="step in steps" ng-click="$state.go(step.state, step.param)"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Is anyone familiar with a good way to pass both state and param dynamically?</p>