AngularJS multiple routes using JSON data ids

We are new to AngularJS and finding one-or-two problems with setting up multiple routes when using ID's from Json Data.

We are trying to replicate AngularJS Tutorial, so we can click each 'View' button to display a more detailed page of the selected 'Warranty Item' same as the tutorial.

We have uploaded our AngularJS problem to Plunker, If anyone can see something we're missing or know a better route to go down please let us know.

App.js State with ResultSet.JobID

.state('home.singleWarranty', {
    url: '/singlewarranty/{resultset.JobID}',
    templateUrl: 'singlewarranty.html',
    controller: 'warrantyListController'
  })

There is a working/updated plunker

Because there are these states

  .state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'homeController'
  })
 .state('home.singleWarranty', {
    url: '/singleWarranty/:jobID',
    templateUrl: 'singlewarranty.html',
    controller: 'warrantyListController'
  })

We need to build the url like this

<a href="#/home/singleWarranty/{{resultset.JobID}}">View</a>

Instead of this original

// <a href="#/warranty/{{resultset.JobID}}">View</a>

The point is that state 'home.singleWarranty' inherits/extends the url from its parent. So we have to include the parents '/home' as well.

Other solution:

In case we would like to start the url in a child state from the begining, we can do it like this

 .state('home.singleWarranty', {
    url: '^/singleWarranty/:jobID',

See the ^ at the url begining. Then even this would work: 

<a href="#/singleWarranty/{{resultset.JobID}}">View</a>

Check the updated plunker here