Dynamic links and "could not resolve from state" error in AngularJS - angularjs

Question

I am trying give dynamic link from my models which names are "aracData.planlama".
There is no problem on this. But when I click the link I get "could not resolve from state" error on console.
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="sifirmi">
Araç satın alınmış durumda
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="satin-alinacak">
Satın alınması planlanıyor
</label>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.{{aracData.planlama}}" class="btn btn-block btn-info" ng-class="{disabled:aracData.planlama == undefined}">
Sonraki adım <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
And theese are my routing codes:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
.state('form.sifirmi', {
url: '/sifirmi',
templateUrl: 'sifir-mi-ikinci-el-mi.html'
})
.state('form.alindimi', {
url: '/alindimi',
templateUrl: 'alindi-mi.html'
})
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
$urlRouterProvider.otherwise('/form/profile');
})
How can I fix this?

Answer 1

You can't pass an expression to ui-sref for the state name. Instead, you can do this in the controller.
<a ng-click="go(aracData.planlama)">
Inject the $state service into your controller, then do:
$scope.go = function(sub) {
$state.go('form.'+sub);
};
This will probably also work:
$scope.go = $state.go; // may need to do $state.go.bind($state);
<a ng-click="go('form'+aracData.planlama)">
Click here for GitHub discussion about dynamic state name for ui-sref.