JSFiddle - React, Tailwind, and code Playground

Angular: Random Order Filter, $interval, ng-repeat

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul ng-controller="MyCtrl" class="text-center">
    <li ng-repeat="i in rankedList | orderBy:'rank'" class="animated {{fx}} page-header"><span class="badge">{{i.item}}</span></li>
</ul>

CSS

ul li span.badge{font-size:30px}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller("MyCtrl", function ($scope, $window,   $interval) {
$scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
	$interval(function(){
		$scope.rankedList = [];
     angular.forEach($scope.list, function(item) {
        $scope.rankedList.push({
            item: item,
            rank: 0.5 - $window.Math.random()
        });
    });
     $scope.fx = $scope.fx == 'flipInX' ? 'flipInX':'flipInX';
    }, 1400);

});