title: Angular-UI-Router: ui-sref not building href with parameters
body: <p>I have an HTML page, once loaded in the user's browser the 'list' state is activated and the 'list' partial is pulled by Angular and populated with a list of servers. </p>
  
  <p>Each server has a 'details' link that specifies the 'details' state for that server. </p>
  
  <pre><code>&lt;td&gt;&lt;a ui-sref="details({ serverName: '{{server.name}}' })"&gt;Details&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>When rendered the 'ui-sref' generates the expected 'href' url based on the route and its optional parameters. </p>
  
  <pre><code>&lt;a ui-sref="details({ serverName: 'SLCMedia' })" href="#/details/SLCMedia"&gt;Details&lt;/a&gt;
  </code></pre>
  
  <p>When clicked it works as expected and the 'details' partial is pulled and in the controller assigned to that state pulls the server with the name specified.</p>
  
  <p>The issue I am running into is the fact that once the 'details' partial is loaded, it too has a 'ui-sref' to an 'edit' state. </p>
  
  <pre><code>   &lt;a ui-sref="edit({ serverName: '{{server.name}}' })"&gt;
          &lt;button class="btn btn-lg btn-labeled btn-primary"&gt;
              &lt;span class="btn-label icon fa fa-edit"&gt;&lt;/span&gt;
              Edit
          &lt;/button&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>But when this partial is loaded the 'ui-sref' is not generating the correct 'href' url. </p>
  
  <pre><code>   &lt;a ui-sref="edit({ serverName: 'SLCMedia' })" href="#/edit/"&gt;
          &lt;button class="btn btn-lg btn-labeled btn-primary"&gt;
              &lt;span class="btn-label icon fa fa-edit"&gt;&lt;/span&gt;
              Edit
          &lt;/button&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>As you can see the 'href' url is '#/edit/' not '#/edit/SLCMedia' as would be expected. It's got to be something simple that I am missing. Does the change of state have something to do with it?</p>
  
  <p>Here are all of defined 'states' for the page. </p>
  
  <pre><code>// Create the Angular App to rule the Server Management Page
  var serverApp = angular.module('serverApp', [
      'ui.router',
      'serverControllers',
      'utilitiesService'
  ]);
  
  serverApp.config(function ($stateProvider, $urlRouterProvider) {
      // For any unmatched url, redirect to /state1
      $urlRouterProvider.otherwise("/list");
  
      // Now set up the states
      $stateProvider
          .state('list', {
              url: '/list',
              templateUrl: '/views/pages/servers/list.html',
              controller: 'serverListCtrl'
          })
          .state('details', {
              url: '/details/:serverName',
              templateUrl: '/views/pages/servers/details.html',
              controller: 'serverDetailsCtrl'
          })
          .state('create', {
              url: '/create',
              templateUrl: '/views/pages/servers/create.html'
          })
          .state('edit', {
              url: '/edit/:serverName',
              templateUrl: '/views/pages/servers/edit.html',
              controller: 'serverEditCtrl'
          })
  });
  </code></pre>
  
  <p>Here are my controllers</p>
  
  <pre><code>var serverControllers = angular.module('serverControllers', ['utilitiesService']);
  
  serverControllers.controller('serverListCtrl', function ($scope, $http) {
      $http.get('/servers/getList').success(function (data) {
          $scope.serverList = data;
      });
  });
  
  serverControllers.controller('serverDetailsCtrl', function ($scope, $stateParams, $http) {
      var serverName = $stateParams.serverName;
  
      $http.get('/servers/getServerByName/' + serverName).success(function (data) {
          $scope.server = data;
      });
  });
  
  serverControllers.controller('serverEditCtrl', function ($scope, $stateParams, $http, $state, showAlertMessage) {
      var serverName = $stateParams.serverName;
  
      $http.get('/servers/getServerByName/' + serverName).success(function (data) {
          $scope.server = data;
      });
  
      $scope.server.submitForm = function (item, event) {
          console.log("--&gt; Submitting Server Update");
  
          //TIMDO: Verify all required fields have been included
  
          var responsePromise = $http.post("/servers/postEdit", $scope.server, {});
          responsePromise.success(function(dataFromServer, status, headers, config) {
              showAlertMessage({
                  type: 'success',
                  title: 'Success',
                  message: 'Server information updated'
              });
  
              $state.go('clear');
          });
          responsePromise.error(function(data, status, headers, config) {
              showAlertMessage({
                  type: 'error',
                  title: 'Success',
                  message: 'Server information updated'
              });
          });
      }
  });
  </code></pre>