AngularJS $stateParams - Data not passing between states

Question

I am using $stateParams with angular ui-router to pass in the id property of a json object to the url when employees in an employees list are clicked, so that their data is shown in the employee details page.

The url routing seems to be working, because the employee id is successfully shown in the url, but the data is not passing to the employee details state from the employee list. Employees are stored in json objects within controller 'employeesListController', in the 'employees/employeesList' state, and I need the details for the clicked employee to show in controller 'employeeDetailsController', in the 'employees/employeeDetails' state.

Example of url extension I'm getting (so it's routing correctly): /employees/employeeDetails/21101994.

I've looked at $state.go, but can't understand how I would implement it into this code, because I can't find a comprehensive practical example.

States:

.state('employees/employeesList', {
    url: '/employees/employeesList',
    templateUrl: 'pages/employees/employeesList.html',
    controller: 'employeesListController'
})

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/:employeeId',
    templateUrl: 'pages/employees/employeeDetails.html',
    controller: ('employeesDetailsController', ['$scope', '$stateParams', function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
    }])
})

-

'employeesListController':

app.controller('employeesListController', function($scope) {
$scope.active = 'active';

$scope.sortByAllDepartments = '+lastName';

var employees = [
    {
        id: '21101994',
        firstName: 'Employee',
        lastName: 'One'
    },
    {
        id: '22071958',
        firstName: 'Employee',
        lastName: 'Two'
    },
];

$scope.employees = employees;
})

-

HTML incl. ui-sref link:

<li class="collection-item col-xs-12" data-ng-repeat="employee in employees | orderBy: sortByAllDepartments | filter:searchAllDepartments">

    <a ui-sref="employees/employeeDetails({employeeId: employee.id})" class="employeeLink"></a>

        <div>

            <p data-ng-show="employee.firstName || employee.lastName" class="title">{{employee.firstName}} {{employee.lastName}}</p>

            <p data-ng-show="!employee.firstName" class="title">(No Data)</p>

            <p data-ng-show="!employee.lastName" class="title">(No Data)</p>

etc......

Answer 1

The controller declaration for your employees/employeeDetails is wrong. It should be like:

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/:employeeId',
    templateUrl: 'pages/employees/employeeDetails.html',
    controller:  function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
    })
})

If you need a named controller, you can achieve by creating a new controller like:

app.controller('employeeDetailsController', function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
})

And in your state config:

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/:employeeId',
    templateUrl: 'pages/employees/employeeDetails.html',
    controller: 'employeeDetailsController
})

Official Documentation