can't get the value of $stateParams in controller - angularjs

Question

I am trying to get the value of $stateParams in my controller but it is always undefined but I can see there is a value in my view.
As you can see there are values on each link.
app.js
.state('app.help', {
url: '/help',
views: {
'menuContent': {
templateUrl: 'templates/help.html'
}
}
})
.state('app.help-replies', {
url: '/help/:id',
views: {
'menuContent': {
templateUrl: 'templates/help-replies.html'
}
}
})
html view
this is the where the lists of data displays
<div ng-repeat="x in helpData">
<a class="row responsive-xs" href="#/app/help/{{x.id}}">
<div class="col"><h6>{{x.subject}}</h6></div>
</a>
</div>
this is where the single view of the clicked data in the above view.
<div class="row responsive-xs" ng-init="viewHelpAndReplies()">
<div class="col">
<h5>Subject: {{$scope.help_id}}</h5>
</div>
</div>
controller.js
$scope.viewHelpAndReplies = function(){
console.log($stateParams.id);
}

Answer 1

I think you should use ui-sref to pass data
<div ng-repeat="x in helpData">
<a class="row responsive-xs" ui-sref="app.help-replies({id: x.id})">
<div class="col"><h6>{{x.subject}}</h6></div>
</a>
</div>
and retrieve id with
$scope.id = $stateParams.id;

Answer 2

Okay I think I got what I needed. But I am not sure if this is good, but for me it is okay because it works.
Here's what I do:
I change the href
href="#/app/help/{{x.id}}"
into ng-click and create a function
ng-click="doViewHelp({id:x.id})"
and create function in my controller.js:
$scope.doViewHelp = function(data){
$state.go('app.help-replies');
// some codes...
}
Thanks.