Move order of list

I have follow code:

angular.module("myApp", []).controller("myController", function ($scope) {
  $scope.currentValue;
  $scope.list = [
          {
            "ID" : 1,
            "Name" : "Zurich"
          },
          
          {
            "ID" : 2,
            "Name" : "Berlin"
          },
    
          {
            "ID" : 3,
            "Name" : "London"
          },
          
          {
            "ID" : 4,
            "Name" : "Paris"
          },
    
          {
            "ID" : 5,
            "Name": "Stockholm"
          }
     ];
  
  
  $scope.setValue = function (item) {
    $scope.currentValue = item;
  }
  
  $scope.getValue = function () {
    if(!$scope.currentValue) {
      $scope.currentValue = $scope.list[0];
    }
    return $scope.currentValue;
  }
});

.wrapper {
  display: flex;
  padding: 5px;
}

.activeCity {
  height: 30px;
  color: darkblue;
  background-color: grey;
  padding: 5px;
}

.cities {
  display: flex;
}

.city {
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  padding: 5px;
}

.city:hover {
  font-weight: bold;
  cursor: pointer;
}

<html ng-app="myApp" ng-controller="myController">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  
  <body>
    <div class="wrapper" ng-init="getValue()">
      <div class="activeCity">
        {{currentValue.Name}}
      </div>
      
      <div class="cities" ng-repeat="item in list" ng-if="currentValue.ID != item.ID">
        <div class="city" ng-click="setValue(item)">
          {{item.Name}}
        </div>
      </div>
    </div>
  </body>
</html>

The order in my list is: Zurich, Berlin, London, Paris and Stockholt. The active City is picked out of the class "cities" and shown in the box "activeCity". This is on default "Zurich" and the list in the box continiues in the correct order. Now when I set a new active city by clicking on one in the div "cities", the order should change. For example: When I click on "Berlin", in the div "activeCity" should be picked out Berlin and the order of list should move and show: London, Paris, Stockholm, Zurich - because after Berlin the next city is London and so on. How can I do this? When I click on the last in list "Stockholm", the order should beginn with the first again, it's like in a circle.

Thanks.

Solution

You will need to do some smart array manipulation in order to move parts around cyclically. This should be the trick:

var index = $scope.list.indexOf(item);
var before = $scope.list.slice(0, index + 1);
var after = $scope.list.slice(index + 1);
$scope.list = [].concat(after, before);

... or in ES6 it would be a bit shorter:

$scope.list = [...after, ...before];

Check out the demo below.

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentValue;
  $scope.list = [{
      "ID": 1,
      "Name": "Zurich"
    },

    {
      "ID": 2,
      "Name": "Berlin"
    },

    {
      "ID": 3,
      "Name": "London"
    },

    {
      "ID": 4,
      "Name": "Paris"
    },

    {
      "ID": 5,
      "Name": "Stockholm"
    }
  ];


  $scope.setValue = function(item) {
    $scope.currentValue = item;
    var index = $scope.list.indexOf(item);
    var before = $scope.list.slice(0, index + 1);
    var after = $scope.list.slice(index + 1);
    $scope.list = [].concat(after, before); 
    // ES6: $scope.list = [...after, ...before];
    // console.log($scope.list.map(item => item.Name))
  }

  $scope.getValue = function() {
    if (!$scope.currentValue) {
      $scope.currentValue = $scope.list[0];
    }
    return $scope.currentValue;
  }
});

.wrapper {
  display: flex;
  padding: 5px;
}
.activeCity {
  height: 30px;
  color: darkblue;
  background-color: grey;
  padding: 5px;
}
.cities {
  display: flex;
}
.city {
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  padding: 5px;
}
.city:hover {
  font-weight: bold;
  cursor: pointer;
}

<html ng-app="myApp" ng-controller="myController">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div class="wrapper" ng-init="getValue()">
    <div class="activeCity">
      {{currentValue.Name}}
    </div>
    <div class="cities" ng-repeat="item in list" ng-if="currentValue.ID != item.ID">
      <div class="city" ng-click="setValue(item)">
        {{item.Name}}
      </div>
    </div>
  </div>
</body>

</html>