JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="angular" ng-app="ocUtils">
    <div>Look below:</div>
    <div ng-controller="MyCtrl">
        <div ng-repeat="item in items"
            class="hidden"
            oc-fade-in=""
            oc-fade-out="item.removed">fade me in aoutomatically</div>
        <a href="#" ng-click="add()">Add</a>&nbsp;<a href="#" ng-click="pop()">Pop</a>
    </div>
</div>

CSS

.hidden {
    display: none;
}

JavaScript

var FADE_OUT_TIMEOUT = 500;
var ocUtils = angular.module("ocUtils", []);
ocUtils.directive('ocFadeIn', [function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).fadeIn("slow");
        }
    };
}]);

ocUtils.directive('ocFadeOut', [function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs["ocFadeOut"],
            function (value) {
                if (value) {
                     $(element).fadeOut(FADE_OUT_TIMEOUT);
                }
            });
        }
    };
}]);

function MyCtrl($scope, $timeout) {
    this.$scope = $scope;
    $scope.items = [];
    $scope.add = function () {
        $scope.items.push({removed: false});
    }
    $scope.pop = function () {
        $scope.items[$scope.items.length - 1].removed = true;
        $timeout(function () {
            $scope.items.pop();
            console.log($scope.items.length);
        }, FADE_OUT_TIMEOUT);
    }
}