angular1 & ionic1 update ui-ref after radiobutton selection - angularjs

Question

I am a bit lost. I try to update the ui-ref of a button, after the user click on one of to radio buttons. The ui-ref gets updated correctly but the automaticly generated href stays the same. What are I am doing wrong?
Code in the view:
<div ng-controller="radiotCtrl">
<div class="list" >
<ion-radio ng-repeat="item in radiotList"
ng-value="item.value"
ng-model="data.radiot">
{{ item.text }}
</ion-radio>
</div>
<div ui-sref='{{ data.radiot }}'> <a id="button14" class=" button button-positive button-block button-outline ">Next</a></div>
</div>
and the controller:
.controller('radiotCtrl', function($scope) {
$scope.radiotList = [
{ text: "Selection 1", value: 'mynav.sele1' },
{ text: "Selection 2", value: 'mynav.sele2' },
];
$scope.data = {
radiot: 'mynav.sele1'
};
});

Answer 1

You should place ui-sref on anchor(a) tag so that it will generate correct href by evaluating state provided to it.
<div>
<a ui-sref='{{ data.radiot }}' id="button14"
class=" button button-positive button-block button-outline ">
Next
</a>
</div>

Answer 2

ui-sref does not support two way data binding. here is the discussion about this topic on github: https://github.com/angular-ui/ui-router/issues/395
a simple and working solution for me was to use ng-click instead:
Code in the view:
<div ng-controller="RadioBuCtrl">
<form class="list ">
<ion-radio ng-model="user.answer" ng-value="'mynav.optionone'">Option 1</ion-radio>
<ion-radio ng-model="user.answer" ng-value="'mynav.optiontwo'">Option 2</ion-radio>
</form>
<a ng-click="submitAnswer(user)" class="button button-positive">Next</a>
</div>
and the controller:
.controller('RadioBuCtrl', function($scope, $state) {
$scope.submitAnswer=function(user){
$state.go(user.answer);
}
});