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>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 ocUtils = angular.module("ocUtils", []);
ocUtils.directive('ocFadeIn', [function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).fadeIn("slow");
        }
    };
}]);

function MyCtrl($scope) {
    this.$scope = $scope;
    $scope.items = [];
    $scope.add = function () {
        $scope.items.push('new one');
    }
    $scope.pop = function () {
        $scope.items.pop();
    }
}

//angular.bootstrap(viewport['0'], ["ocUtils"]);