UI-Router don't route with param - angularjs

Question

I use UI-Router. I have a first controller
vehicuels.controller.js:
'use strict';
angular.module('autoPrivilegeApp')
.controller('VehiculesCtrl', function ($scope,$http, $state) {
$scope.awesomeThings = [];
$http.get('/api/cars').success(function (awesomeThings) {
$scope.message = awesomeThings;
});
// Show Car detail
$scope.showCarDetail = function (_id) {
$state.go('vehiculeDetail', {id: _id});
};
});
vehicules.js:
'use strict';
angular.module('autoPrivilegeApp')
.config(function ($stateProvider) {
$stateProvider
.state('vehicules', {
url: '/vehicules',
templateUrl: 'app/vehicules/vehicules.html',
controller: 'VehiculesCtrl'
});
});
vehicules.html:
<div class="col-md-12">
<div ng-repeat="car in message">
<button class="medium bouton bleu" ng-click="showCarDetail(car._id);">
{{ car._id }}
</button>
<br/><br/><br/><br/>
</div>
</div>
I want to pass id to my second controller
vehiculeDetail.controller.js:
'use strict';
angular.module('autoPrivilegeApp')
.controller('VehiculeDetailCtrl', function ($scope,$stateParams ) {
$scope.message = $stateParams.instanceID;
});
vehiculeDetails.js:
'use strict';
angular.module('autoPrivilegeApp')
.config(function ($stateProvider) {
$stateProvider
.state('vehiculeDetail', {
url: '/vehiculeDetail/{id}',
templateUrl: 'app/vehiculeDetail/vehiculeDetail.html',
controller: 'VehiculeDetailCtrl'
});
});
vehiculeDetail.html:
<div class="col-md-12">
This is the vehiculeDetail id {{message}}.
</div>
I have use the yeoman generator --> generator-angular-fullstack
my problem is that I do not get my id in my controller VehiculeDetailCtrl.
What is wrong?

Answer 1

The $stateParams uses name as they are defined in url:
$stateProvider
.state('vehiculeDetail', {
url: '/vehiculeDetail/{id}', // here we name our param as 'id'
So, we have to use now the name id instead of the instanceID
.controller('VehiculeDetailCtrl', function ($scope,$stateParams ) {
//$scope.message = $stateParams.instanceID;
$scope.message = $stateParams.id;