Angular and ui-router state children - angularjs

Question

I have this state:
}).state('sport', {
url: "/:sport",
templateUrl: '/app/sports/sport.tpl.html',
controller: 'SportController',
controllerAs: 'controller'
});
and the controller looks like this:
.controller('SportController', ['$stateParams', function ($stateParams) {
var self = this;
// Object to hold our parameter
self.slug = $stateParams.sport;
}]);
So, what I am trying to do is pass this parameter to another state. Which I have set up like this:
.config(['$stateProvider', function ($stateProvider) {
// Set up our state(s)
$stateProvider.state('sport.designer', {
url: "/designer",
abstract: true,
templateUrl: '/app/designer/designer.tpl.html',
controller: 'DesignerController',
controllerAs: 'controller'
}).state('sport.designer.team', {
url: "",
templateUrl: '/app/designer/team.tpl.html'
}).state('sport.designer.kit', {
url: "/kit",
templateUrl: '/app/designer/kit.tpl.html'
}).state('sport.designer.design', {
url: "/design",
templateUrl: '/app/designer/design.tpl.html'
}).state('sport.designer.refine', {
url: "/refine",
templateUrl: '/app/designer/refine.tpl.html'
}).state('sport.designer.order', {
url: "/order",
templateUrl: '/app/designer/order.tpl.html'
});
}])
and the controller looks like this:
.controller('DesignerController', ['$stateParams', 'DesignerService', 'HttpHandler', 'Api', function ($stateParams, service, handler, api) {
var self = this;
var slug = $stateParams.sport; // Get our slug
console.log(slug);
}]);
So, there are a couple of issues here.
If set up a link like this: ui-sref="sport.designer.team({ sport: controller.slug })" then the view doesn't move from the sport state.
The reason I am using .team is because .designer is an abstract state and the team state is the default state that loads
Here is my html for the sport state:
<a ui-sref="sport.designer.team({ sport: controller.slug })">Test</a>
Can anyone see what I am doing wrong?

Answer 1

I got this working today.
My sport state stayed the same.
I changed the designer states to this:
// Set up our state(s)
$stateProvider.state('designer', {
url: ':sport/designer',
abstract: true,
templateUrl: '/app/designer/designer.tpl.html',
controller: 'DesignerController',
controllerAs: 'controller'
}).state('designer.team', {
url: '',
templateUrl: '/app/designer/team.tpl.html'
}).state('designer.kit', {
url: '/kit',
templateUrl: '/app/designer/kit.tpl.html'
}).state('designer.design', {
url: '/design',
templateUrl: '/app/designer/design.tpl.html'
}).state('designer.refine', {
url: '/refine',
templateUrl: '/app/designer/refine.tpl.html'
}).state('designer.order', {
url: '/order',
templateUrl: '/app/designer/order.tpl.html'
});
and then in my sport.tpl.html I set the link up:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{ controler.slug }}</h1>
<p>This will be the sport homepage.</p>
<p><a ui-sref="designer.team({ sport: controller.slug })">Click to get started</a></p>
</div>
</div>
</div>
and that was it. Designer, did not have to be a child of sport.