angular ui-router state issue

I am currently trying to set up routes in my angular application. I have these states:

.state('pet', {
  url: '/pet/:petId',
  templateUrl: 'scripts/views/profile/profile.html',
  controller: 'ProfileCtrl'
})
.state('addPet', {
  url: '/pet/add',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})
.state('editPet', {
  url: '/pet/:petId/edit',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})

The problem is when I want to go on the 'addPet' state, angular is trying to call 'pet' state with 'add' as the ':petId' parameter.

So I tried to do it in a different way:

.state('pet', {
  url: '/pet',
  abstract: true
})
.state('pet.show', {
  url: '/:petId',
  templateUrl: 'scripts/views/profile/profile.html',
  controller: 'ProfileCtrl'
})
.state('pet.add', {
  url: '/add',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})
.state('pet.edit', {
  url: '/:petId/edit',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})

and it doesn't work at all.

Any suggestions ?