move to different pages based on the checked radio button

Question

i have this form and it has 3 ionic radio buttons used.Is there a way to a move to different pages according to the radio buttons that are selected.For ex: my radio buttons are named

1.USO 2.OASO 3.TFTSO

I want to move to a different page if i select USO , and to another different page if i choose OASO and so on. I want to move only after i click the 'Proceed' Button that i've implemented in my code.

This is how i've implemented by radio buttons and proceed button in html

<label class="labelColor">
     <h5><b>Select Standing Order Type</b></h5>
</label>
<div class="list">
     <ion-radio ng-repeat="item in clientSideList"
                ng-value="item.value"
                ng-model="data.clientSide">
      {{ item.text }}
      </ion-radio>       
</div>

 <!-- BUTTONS -->
 <div class="col" 
      style="text-align: center">
      <button align="left" 
              class="button button-block button-reset" 
              style="display: 
              inline-block;width:100px;text-align:center " 
              type="reset"
              ng-click="submitted = false;  reset()" 
              padding-top="true">
       Reset
      </button>
      <button class="button button-block button-positive"  
              style="display: inline-block;width:100px "
              ng-click="submitted=true; "padding-top="true">
      Proceed
      </button>
</div>

my angularjs

.controller('OrderCtrl', function($scope,$state) {
     $scope.clientSideList = [
          { text: "Utility Standing Order", value: "uso" },
          { text: "Own Account Standing Order", value: "oaso" },
          { text: "Third Party Fund Transfer Standing Order", value: "tpftso" }
     ];

     $scope.data = {
       clientSide: 'uso'
     };

})

My controller

.controller('OrderCtrl', function($scope,$state, $http,  $ionicPopup) {





     $scope.clientSideList = [
    { text: "Utility Standing Order", value: "uso"  },
    { text: "Own Account Standing Order", value: "oaso"  },
    { text: "Third Party Fund Transfer Standing Order", value: "tpftso" }

  ];



  $scope.data = {
    clientSide: 'uso'
  };

    $scope.move = function () {
    var path;
    switch($scope.data.clientSide) {
      case 'uso': path = '/so/utilitystanding'; break;
      case 'oaso': path = '/so/ownstandingorder'; break;
      case 'tpftso': path = '/so/thirdstandingorder'; break;
    }
    $state.go(app.standing);
  };


            })



.controller('utilityStandingCtrl', function($scope,$state) {

});

Answer 1

Try to add ng-click to your Proceed button and define function which will analyse value of your selected data.clientSide and then call $location.path(url) . You need to inject $location service into your controller.
JavaScript:

  $scope.goSomewhere = function () {
    var path;
    switch($scope.data.clientSide) {
      case 'uso': path = '/uso'; break;
      case 'oaso': path = '/oaso'; break;
      case 'tpftso': path = '/tpftso'; break;
    }
    $location.path(path);
  };

And HTML:

<button ng-click="goSomewhere()">Proceed</button>

Demo: http://plnkr.co/edit/jawx0OivVmu2EyNmAbR9?p=preview

Edit

My answer above is related to angular-route , not to ui-router . In the last you need to use all the same code except of function call. Instead of location.path() it must me

$state.go(yourStateName)

Please note, not url , but state name.

Edit2

Here is code for ionic framework (almost the same) + settings of application.

Config:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('main', {
      url: "/main",
      templateUrl: 'main.html'
    })
      .state('usoStateName', {
        url: '/uso',
        templateUrl: 'page.html',
        controller: 'usoCtrl'
      })
      .state('oasoStateName', {
        url: '/oaso',
        templateUrl: 'page.html',
        controller: 'oasoCtrl'
      })
      .state('tpftsoStateName', {
        url: '/tpftso',
        templateUrl: 'page.html',
        controller: 'tpftsoCtrl'
      });
      $urlRouterProvider.otherwise('/main');
  });

And function:

  $scope.goSomewhere = function () {
    var path;
    switch($scope.data.clientSide) {
      case 'uso': path = 'usoStateName'; break;
      case 'oaso': path = 'oasoStateName'; break;
      case 'tpftso': path = 'tpftsoStateName'; break;
    }
    $state.go(path);
  };

Demo: http://plnkr.co/edit/0sk3dECPNm35HgMqiprt?p=preview

Answer 2

Instead of {{ item.text }}

Try something like this:

a href=""#/viewName/{{item.text }}"}">{{ item.text }}