JSFiddle - React, Tailwind, and code Playground

Angular timed changes with randomization by removing and re-adding the scope changing the orderBy ng-repeat

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div ng-controller="MyCtrl" class="container">
  <h4 class="pagetitle animated flipInY text-danger">{{caption}}</h4>   {{cunt}}
  <div ng-repeat="panel in panels | orderBy:'rnd' | limitTo:10" class="col-xs-3 {{panel.dir}} animated thumbnail" style="animation: fadeIn {{panel.rnd*$index || 1}}s forwards; -webkit-animation: fadeIn {{panel.rnd*$index || 1}}s;background-image:{{panel.im}};background-size:cover;background-repeat:no-repeat;background-postition:top left" ng-class="myfx">{{panel.id}} /  {{0.5*$index+.4}}s / {{panel.rnd || 1}} / {{0.5*$index+1.4}}s</div>
</div>

CSS

*{border-radius:0}
body{background:#222222}.thumbnail{overflow:hidden;font-size:6px;min-height:120px;border-radius:0;border:0;margin:0}

.tl {
    background: rgba(245,45,45,0.7);
}
.tr {
    background: rgba(143,198,45,0.7);
}
.ml {
     background: rgba(433,233,133,0.7);
}
.mr {
    background: rgba(226,11,10,0.8);;
}
.bl {
    background: rgba(124,22,10,0.8);;
}
.br {
    background: rgba(243,202,10,0.8);;
}

.ll {
    background: rgba(142,19,171,0.8);;
}

.lr {
    background: rgba(191,20,7,0.8);;
}

JavaScript

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

function MyCtrl($scope, $timeout, $interval, $window) {


  $scope.panels = [{
    "id": 1,
		"dir": 'tl',
    "col": 'orange',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Andrew"\)'
  },{
    "id": 2,
		"dir": 'tr',
    "col": '#bb0058',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Mary"\)'
  },{
    "id": 3,
		"dir": 'ml',
    "col": 'blue',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Drew"\)'
  },{
    "id": 4,
		"dir": 'mr',
    "col": '#ecd453',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Liz"\)'
  },{
    "id": 5,
		"dir": 'bl',
    "col": '#ecd453',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Zana"\)'
  },{
    "id": 6,
		"dir": 'bl',
    "col": '#ffe834',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Eliz"\)'
  },{
    "id": 7,
		"dir": 'bl',
    "col": '#fedc32',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Solo"\)'
  },{
    "id": 8,
		"dir": 'mr',
    "col": '#ecd111',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Han"\)'
  },{
    "id": 9,
		"dir": 'bl',
    "col": '#35ecd6',
    "im" : 'url("\http://placehold.it/400x400/transparent/ffffff/&words=Andrew"\)'
  },{
    "id": 10,
		"dir": 'br',
    "col": '#ffedce',
    "im" : 'url("\http://prophyperfect.brandoral.com/dev/productImg/1.png"\)'
  }];

var cubetitles = ['Dental Products ', 'Flossers', 'Childrens Brushes', 'Fun Bags', 'Customized Brushes'];
  var cnt = 0;
	var captionTimer = $interval(function(item) {

	 var cubecount =  cubetitles.length;
     if (cnt >= cubecount)  cnt = 0;
   $scope.caption =     cubetitles[Math.floor(cnt)];
cnt++;
         console.log(cnt) 
  }, 2400)

  // each
  angular.forEach($scope.panels, function(item) {
 		var set_timer = $interval(function() {
     $scope.myfx = 'fadeIn flipInY';
    var pnlcount =...