title: Dynamically set the value of ui-sref Angularjs
body: <p>I have searched for a similar question but the ones that came up seem slightly different.
  I am trying to change the ui-sref='' of a link dynamically (this link points to the next section of a wizard form and the next section depends on the selection made on the dropdown list). I am simply trying to set the ui-sref attribute depending on some selection in a select box. I am able to change the ui-sref by binding to a scope attribute which is set when a selection is made. however the link does not work, is this possible at all? thanks</p>
  
  <pre><code>  &lt;a ui-sref="form.{{url}}" &gt;Next Section&lt;/a&gt;
  </code></pre>
  
  <p>and then in my controller, I set the url parameter this way </p>
  
  <pre><code>switch (option) {
    case 'A': {
      $scope.url = 'sectionA';
    } break;
    case 'B': {
      $scope.url = 'sectionB';
    } break;
  }
  </code></pre>
  
  <p>Alternatively, I used directives to get it to work by generating the hyperlink with the desired ui-sref attribute according to the option selected on the select box (drop down).</p>
  
  <p>Hhowever this means I have to re-create the link each time a different option is selected from the selectbox which causes an undesirable flickering effect. 
  My question is this, is it possible to change the value of the ui-sref as I tried doing above by simpling changing the value of url in my controller or do I have to re-create the entire element using a directive each time a selection is made as I have done below? (just showing this for completeness)</p>
  
  <h2>Select option directive (this directive generates the link directive)</h2>
  
  <pre><code>define(['app/js/modules/app', 'app/js/directives/hyperLink'], function (app) {
  app.directive('selectUsage', function ($compile) {
  
      function createLink(scope,element) {
          var newElm = angular.element('&lt;hyper-link&gt;&lt;/hyper-link&gt;');
          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);
              })
          }
      }
  })
  </code></pre>
  
  <h2>Hyperlink directive</h2>
  
  <pre><code>define(['app/js/modules/app'], function (app) {
  app.directive('hyperLink', function () {
  
      return {
          restrict: 'E',
          templateUrl: '/Client/app/templates/directives/hyperLink.html',
          link: function (scope, element, attrs) { }
      }
  
  })
  </code></pre>
  
  <h2>Hyperlink template</h2>
  
  <pre><code>&lt;div&gt;
      &lt;button ui-sref="form.{url}}"&gt;Next Section&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>