动态设置ui-sref Angularjs的值

我搜索了一个类似的问题，但是出现的似乎有点不同。
我试图动态更改链接的ui-sref =”(此链接指向向导窗体的下一部分，下一部分取决于在下拉列表中所做的选择)。我只是试图设置ui-sref属性取决于在选择框中的一些选择。我可以通过绑定到一个范围属性来更改ui-sref，当进行选择时设置。但是链接不工作，这是可能吗？谢谢

<a ui-sref="form.{{url}}" >Next Section</a>

然后在我的控制器，我这样设置url参数

switch (option) {
  case 'A': {
    $scope.url = 'sectionA';
  } break;
  case 'B': {
    $scope.url = 'sectionB';
  } break;
}

或者，我使用指令来使其工作，通过生成具有期望的ui-sref属性的超链接根据在选择框上选择的选项(下拉)。

Hhowever这意味着我必须重新创建链接每次从选择框中选择不同的选项，导致不良的闪烁效果。
我的问题是这是，是否可能更改ui-sref的值，因为我试图做上面的简单更改url的值在我的控制器或者我必须重新创建整个元素使用指令每次选择是如我所做的下面？ (只是为了完整性)

选择选项指令(此指令生成链接指令)

define(['app/js/modules/app','app/js/directives/hyperLink'],function (app) {
app.directive('selectUsage',function ($compile) {

    function createLink(scope,element) {
        var newElm = angular.element('<hyper-link></hyper-link>');
        var el = $(element).find('.navLink');
        $(el).html(newElm);
        $compile(newElm)(scope);
    }

    return {

        restrict: 'E',templateUrl: '/Client/app/templates/directives/select.html',link: function (scope,element,attrs) {

            createLink(scope,element);

            element.on('change',function () {
                createLink(scope,element);
            })
        }
    }
})

超链接指令

define(['app/js/modules/app'],function (app) {
app.directive('hyperLink',function () {

    return {
        restrict: 'E',templateUrl: '/Client/app/templates/directives/hyperLink.html',attrs) { }
    }

})

超链接模板

<div>
    <button ui-sref="form.{url}}">Next Section</button>
</div>

<a ng-href="{{$state.href(myStateName,myParams)}}">

$stateProvider
  .state('home',{
      url: "/home",...
  })
  .state('parent',{
      url: "/parent?param",...
  })
  .state('parent.child',{ 
      url: "/child",...

<input ng-model="myStateName" />
<input ng-model="myParams.param" />

$scope.items = [
  {label : 'first',url: 'first'},{label : 'second',url: 'second'},{label : 'third',url: 'third'},];
$scope.selected = $scope.items[0];
$scope.gotoSelected = function(){
  $state.go("form." + $scope.selected.url);
};

<div>
  choose the url:
  <select
    ng-model="selected"
    ng-options="item.label for item in items"
  ></select>

  <pre>{{selected | json}}</pre>
  <br />
  go to selected
  <button ng-click="gotoSelected()">here</button>

  <hr />
  <div ui-view=""></div>
</div>