How to change order in ui-router?

This scenario with ui-router could have two (if not even more) solutions. Check both of them here in this working example. We can firstly continue with your Paren-Child scenario, we just have to do few changes

// Parent - Child Scenario.config(['$stateProvider',  function($stateProvider) {  // parent child  $stateProvider    .state('shoppings-view', {      url: '/shoppings/:id',      templateUrl: 'tpl.shoppings-view.html',      controller: 'ParentCtrl',    })    .state('shoppings-view.order', {      url: '/:order',      template: '<div>some child content if needed</div>',      controller: 'ChildCtrl',    }); }]).controller('ParentCtrl', function($scope, $state, $stateParams, DataSvc) {  $scope.data = [];  // parent declares method on a $scope  $scope.load = function(params){    $scope.data = DataSvc.getAll(params)  }  $scope.load($stateParams);}).controller('ChildCtrl', function($scope, $state, $stateParams) {  // child scope has inherit that function  // and calls the parent to relaod with new params  $scope.load($stateParams);})

What we can see here, is that child gets the $scope inherited (see Understanding Scopes) and therefore has access to a parent method $scope.load($stateParams);. Whenever there is new child state with new param invoked, it calls parent to relaod the data.

Maybe not the best here, but the concept of published methods on parent $scope, available for a child(ren) is a feature I do use a lot...

Second approach could be to move all that stuff into one simple state, with more params:

// scenario with Single state.config(['$stateProvider',    function($stateProvider) {  // single state  $stateProvider    .state('shoppings', {      url: '/shoppings-single/:id/:order',      templateUrl: 'tpl.shoppings-single.html',      controller: 'SingleCtrl',      resolve : {        data : function($stateParams, DataSvc){          return DataSvc.getAll($stateParams)        }      }    }); }]).controller('SingleCtrl', function($scope, $state, $stateParams, data) {  $scope.data = data;  $scope.orderBy = $stateParams.order;})

There is nothing special, just we can see that one state can have more params (see URL Parameters)

All that together check here

You have the same template for the parent and child state, which doesn't make much sense. Are you nesting an identical template inside itself?

A child state includes its parent state. So anything in the parent state template is included in the child state.