Ui-router URL changes, nested view not loading

Question

I've been working on an app and had done it before with ui-router but with ionic and it worked. As in the title, the URL changes correctly to what I'd expect, however nothing happens after. I know that the template is correctly found because it's loaded into ressources.

I generated an yo angular-fullstack template and every view is loaded to an ui-view in the index.html but this one. I created /shifts with angular-fullstack:route shifts and the controllers with angular-fullstack:controller shift and angular-fullstack:controller shiftDetails. The url /shifts loads correctly but not the /shift/289283 even though the url changes and $stateOnSuccess passes.

Also tried with inline template, didn't work. Controller are not really relevant but I give it to you.

shift controller

    angular.module('velociteScheduleApp')
  .controller('ShiftsCtrl', function ($scope,$rootScope, $http, $state) {

    $http.get("/api/shifts").success(function(shifts){
        $scope.shifts = shifts;
    })

    $scope.shiftDetails = function(shiftId){
        $state.go('shifts.details', {shiftId:shiftId}); //get it from shifts.html ng-click

     }
});

ShiftDetails controller

angular.module('velociteScheduleApp')
  .controller('shiftDetailsCtrl', function ($scope) {

});

Shift.js routes and states

angular.module('velociteScheduleApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('shifts', {
        url: '/shifts',
        templateUrl: 'app/shifts/shifts.html',
        controller: 'ShiftsCtrl'
      })
      .state('shifts.details', {
        url: '/:shiftId',
        templateUrl: 'app/shiftDetails/shiftDetails.html',
        controller: 'ShiftDetailsCtrl'
      })

  });

shiftDetails.html

<div class="container">
    <h3>Détails du shift</h3>
    <p>qwewqe</p>
</div>

shifts.html where I use the ui-sref (tried also with state.go() )

<li class="list-group-item" ng-repeat="shift in shifts" >
<a ui-sref="shifts.details({shiftId:shift._id})" >
{{shift.nom.length > 0 ? shift.nom : "Pas de nom"}}</a></li>

Answer 1

are you sure taht your container is not actually hidden in your page but well generated ?

<div class="container">
    <h3>Détails du shift</h3>
    <p>qwewqe</p>
</div>

Your ui-sref call seems ok, as your routing

Answer 2

There is a working plunker

You are almost there. The essential missing piece is the target for a child. In our parent state, and its view shiftDetails.html, we desperately need the:

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

That will be the place, where the template of the child state 'shifts.details' - will be injected. That's it.

Check it here