changing $routeProvider to $urlRouterProvider - angularjs

Question

I am new to angularjs and trying to change my codes using $routeProvider to $urlRouterProvider.
Here is my code for using $routeProvider:
.when('/cars', {
templateUrl: 'views/cars.html',
controller: 'CarsCtrl'
})
.when('/cars/:id', {
templateUrl: 'views/cardetail.html',
controller: 'CarDetailCtrl'
})
and my html looks like this:
<div class="list-group" ng-repeat="car in cars">
<a href="#/cars/{{car.id}}" class="list-group-item active">
<h4 class="list-group-item-heading">{{car.id}}</h4>
<p class="list-group-item-text">Car name: {{car.name}}</p>
<p class="list-group-item-text">Car date: {{car.date}}</p>
</a>
</div>
So when I click on one of the car arrays, it leads to cardetail.html.
This code works in using $routeProvider. Now, I am trying to convert this to using $urlRouterProvider, and I am having a bit of problem.
What I did so far looks like this (which doesn't work):
.state('cars', {
url: '/cars',
parent: 'dashboard',
templateUrl: 'views/modules/cars/cars.html?v='+window.app_version,
controller: 'CarsCtrl'
})
.state('carDetail', {
url: '/car/:id',
parent: 'dashboard',
templateUrl: 'views/modules/cars/carsDetail.html?v='+window.app_version,
controller: 'CarDetailCtrl'
})
and my HTML:
<pageheader pagename="Cars" subtitle="your cars"></pageheader>
<div class="list-group" ng-repeat="car in cars">
<a ng-href="#/carDetail/{{id}}" class="list-group-item active">
<h4 class="list-group-item-heading">{{car.id}}</h4>
<p class="list-group-item-text">Car name: {{car.name}}</p>
<p class="list-group-item-text">Car date: {{car.date}}</p>
</a>
</div>
Is there a problem in my HTML?
help much appreciated.

Answer 1

Use ui-sref to build your links.
<a ui-sref="carDetail({id: id})" class="list-group-item active">