JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<div ng-controller="MyCtrl">
<div ng-style="{height: ((widgets.length * 45) + 'px')}" id="widgetHolder" class="content-wrapper">
    <div ng-repeat="widget in widgets">
        <div my-widget class='widget' id='widget{{$index}}' >
            <span>This is Widget {{$index}} with Position Index:  {{widget.positionIndex}}</span>
            <div class='moveButton' ng-click="moveWidgets(widget)">Move This Widget To Top</div>
        </div>
    </div>
</div>


</div>

CSS

.widget {
    width: 100%;
    height: 40px;
    position: absolute;
    clear: both;
    z-index: 1;
    -webkit-transition: top 1s ease-in-out 0s;
-moz-transition: top 1s ease-in-out 0s;
transition: top 1s ease-in-out 0s;
}
.widget.moveUp
{
    z-index: 100!important;
}
.widget.moveDown
{
    z-index: 1!important;
}
#widgetHolder {
    position: relative;
    clear: both;
}
#widget0 {
    background-color: orange;
}
#widget1 {
    background-color: red;
}
#widget2 {
    background-color: blue;
}
#widget3 {
    background-color: green;
}
#widget4 {
    background-color: yellow;
}
.moveButton{cursor:pointer;}

JavaScript

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

function Widget(index) {
    this.positionIndex = index;
}

angular.module('myApp')
    .controller('MyCtrl', [
        '$scope', '$timeout', function ($scope, $timeout) {
            $scope.widgets = [];
            
            for (var i = 0; i < 5; i++) {
                var widgetCreated = new Widget(i);
                $scope.widgets.push(widgetCreated);
            }

            $scope.moveWidgets = function(widgetToMoveToTop) {
                if (widgetToMoveToTop.positionIndex != 0) {
                    $timeout(function () {
                        var widgetsLen = $scope.widgets.length,
                            widgetToMoveInitialPosition = widgetToMoveToTop.positionIndex;

                        angular.forEach($scope.widgets, function (widget, key) {
                            if (widget.positionIndex > widgetToMoveInitialPosition) {
                                widget.positionIndex = widget.positionIndex - widgetToMoveInitialPosition;
                            } else if (widget.positionIndex < widgetToMoveInitialPosition) {
                                widget.positionIndex = (widgetsLen - widgetToMoveInitialPosition) + widget.positionIndex;
                            } else {
                                widget.positionIndex = 0;
                            }
                        });
                    });
                }
            }
        }
    ])
    .directive('myWidget', ['$timeout', function($timeout) {
        function link(scope, element, attrs) {
            scope.$watch(function() {
                return scope.widget.positionIndex;
            }, function (newValue, oldValue) {
                if (newValue < oldValue) {
                    // COMMENT THIS OUT 
                    element.removeClass('moveDown').addClass('moveUp').css('top', (newValue * 45) + 'px'); 
                    // AND UNCOMMENT HERE AND SECTION BELOW TO GET IT TO WORK
                   ...