Q:

Swap the ng-repeat element in angularjs

I want to set seven after six how could i fixed it into view without changing $scope.myJson.
<div ng-app='app' ng-controller='mainCtrl'>
    {{ctrlTest}}<hr/>Ng-Repeat<hr/>
    <div ng-repeat="json in myJson">
        <li>{{json}}</li>
    </div>
</div>

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
    $scope.ctrlTest = "Applying";
    $scope.myJson = ["one", "two", "three", "four", "five", "six", "eight", "nine", "seven"]
    $scope.jsons = function(){
        console.log('callback called');
    }
})

Please see fiddle
http://jsfiddle.net/HgDA7/757/

A:

Following is the only solution I came up with by creating an custom filter and custom compareFunction

angular.module('app', []).controller('mainCtrl', function($scope) {
  $scope.ctrlTest = "Applying";
  $scope.myJson = ["one", "two", "three", "four", "five", "six", "eight", "nine", "seven"]
  $scope.jsons = function() {
    console.log('callback called');
  }
}).filter('customsort', function() {
  return function(list) {
    var sortOrder = {
     'one': 1,
     'two': 2,
     'three': 3,
     'four': 4,
     'five': 5,
     'six': 6,
     'seven': 7,
     'eight': 8,
     'nine': 9
    }
    list.sort(function(a, b) {
      return sortOrder[a] - sortOrder[b];
    })
    return list;
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
  {{ctrlTest}}
  <hr/>Ng-Repeat
  <hr/>
  <div ng-repeat="json in myJson | customsort">
    <li>{{json}}</li>
  </div>
</div>

