title: AngularJS UI Router: ui-sref not updating URL in address bar?
body: <p>I'm building an AngularJS app and I'm using UI-Router in order to navigate through the app. </p>
  
  <p>The flow of the web app consist in first registering or login, then it takes you to a main grid that has a lot of elements that are being displayed through ng-repeat and when you click in one of them it takes you to a dashboard that displays information of the element that has been clicked and it also successfully changes the path to index.html#!/dashboard/(here goes the name of the element) </p>
  
  <p>This is the html 5 code of that main grid:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
      &lt;div class="row" ng-controller="ribtStateServicesController" &gt;
  
          &lt;div class="col-md-3 ribt_HomeGrid" ng-repeat="estado in estados" &gt;
              &lt;div class="img-ribt_overlay" &gt;
                 &lt;a ng-click="doWork(estado.idState)" ui-sref="dashboard({ribtNameState: estado.idState})"&gt;
                  &lt;img src="{{estado.image}}" class="img-thumbnail"&gt;
                  &lt;div class="ribt_overlay" &gt;&lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, in that same dashboard I have a side menu, that has the same elements that were used in the main grid before. So I figured that it would take the same logic to be able to use the params that the UI-Router offer in order to change the URL and the content displayed. But it does nothing.</p>
  
  <p>This is the code in the HTML of the dashboard's side menu:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-6 nopadding" ng-repeat="estado in estados | filter:busqueda"&gt;
  
  
                      &lt;md-card md-ink-ripple="#ffffff"&gt;
                          &lt;img ng-src="{{estado.nolabel}}" class="md-card-image ribt_estado_side_img" 
                          ui-sref="dashboard({ribtNameState: estado.idState})"
                          
                          alt="Estado" ng-click="doWork(estado.idState); toggleLeft()"&gt;
                          &lt;md-card-title class="nopadding"&gt;
                              &lt;md-card-title-text&gt;
                                  &lt;p class="ribt_card_estado_nombre"&gt;{{estado.nombre}}&lt;/p&gt;
                              &lt;/md-card-title-text&gt;
  
                              &lt;md-menu&gt;
  
  
                                  &lt;md-button class="md-icon-button float-right" aria-label="Share" ng-click="$mdMenu.open()"&gt;
                                      &lt;i class="material-icons"&gt;more_vert&lt;/i&gt;
                                  &lt;/md-button&gt;
  
                                  &lt;md-menu-content width="4" ng-mouseleave="$mdMenu.close()"&gt;
                                      &lt;md-menu-item ng-repeat="item in [1, 2, 3]"&gt;
                                          &lt;md-button&gt;
                                              Option {{item}}
                                          &lt;/md-button&gt;
                                      &lt;/md-menu-item&gt;
                                  &lt;/md-menu-content&gt;
  
                              &lt;/md-menu&gt;
  
                          &lt;/md-card-title&gt;
  
                      &lt;/md-card&gt;
  
  
  
  
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Heres is the code in my app config:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ribtApp.config(function ($stateProvider,$mdThemingProvider,$locationProvider) {
      
      $stateProvider
      
      .state('login',  {
          url: '',
          templateUrl: 'ribtComponents/ribtLogin/ribtLogin.html',
          controller: 'ribtLoginController'
      }) 
      
      .state('home', {
          url: '/home',
          templateUrl: 'ribtComponents/ribtHome/ribtHome.html',
          controller: 'ribtStateServicesController'
      })
      
      .state('dashboard', {
          url: '/dashboard/{ribtNameState}',
          templateUrl: 'ribtComponents/ribtDashboard/ribtDashboard.html',
          controller: 'ribtStateServicesController',
          resolve:{
              ribtNameState: ['$stateParams', function($stateParams){
                  return $stateParams.ribtNameState;
                  console.log($stateParams.ribtNameState)
              }]
          }
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried a console log to see if the param was being changed and it is but it does nothing to the URL path. I've tried a lot of code that I've found in stackoverflow but none of them has worked. I would be deeply thankful if you could help me with this.</p>