UI-Router: URL changes, but view is not loaded

I have the following code for my router:

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state('main', {
      url: '/',
      templateUrl: 'templates/main.html',
      controller: 'MainCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
    })
    .state('signup', {
      url: '/signup',
      templateUrl: 'templates/signup.html',
      controller: 'SignupCtrl'
    })
    .state('userEdit', {
      url: '/user/edit',
      templateUrl: 'templates/user/edit.html',
      controller: 'UserEditCtrl'
    })
    .state('workouts', {
      url: '/workouts',
      templateUrl: 'templates/workouts/index.html',
      controller: 'WorkoutsCtrl'
    })
    .state('workouts.show', {
      url: '/:id',
      templateUrl: 'show.html',
      controller: 'WorkoutCtrl',
      onEnter: function() {
        console.log('this is stupid');
      }
    })

    $urlRouterProvider.otherwise('/');

}])

My issue is with the workouts.show state. I have this link:

<div class="" ng-repeat="workout in workouts track by workout._id">
  <hr>
  <a ui-sref="workouts.show({id: workout._id})">{{ workout.shortURI }}</a>
  <p>{{ workout.description }}</p>
  <ul class="exercise-list">
    <li ng-repeat="exercise in workout.exercises">{{ exercise }}</li>
  </ul>
  <hr>
</div>

When I click on the link with ui-sref"workouts.show({id: workout._id})" the url changes to the proper format, and adds the id dynamically, but the view does not load. It just stays on the same page.

I have seen several other questions that are similar, but none of the accepted solutions have worked for me, and I have spent too long on this now.

Thanks in advance for any help!

I had similar issue. You must have a ui-view in your "workouts" state, so that your "workouts.show" will render as a child. Hope this helps.