How to display items in reverse order using AngularJS ng-repeat

Waqas Anwar
12 February 2016
3672 Views

If you are using AngularJS ng-repeat to iterate over a list of items and you want to display all the items in reverse order you can use orderby filter along with $index:true

AngularJS

(function () {
   'use strict';

   angular
      .module('app', [])
      .controller('DemoController', DemoController);

      function DemoController (){
         var vm = this;
         vm.items = ["Green", "Blue", "Red", "Black", "White"];
      }
})();

HTML

<!DOCTYPE html>
<html lang="en-US">
<body ng-app="app">

<div ng-controller="DemoController as vm">
   <div ng-repeat="item in vm.items | orderBy:'$index':true">
      <span>{{item}}</span>
   </div>
</div>

<script src="angular.min.js"></script>
<script src="app.js"></script>

</body>
</html>

Output
White
Black
Red
Blue
Green