JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<div ng:controller="HideShowController">
    <hide-show messages="httpMessages"></hide-show>  
</div>

JavaScript

var app = angular.module("app", []);

app.controller("HideShowController", function($scope) {
    $scope.httpMessages = [{message:"hello"}, {message:"hello world"}]
});

app.directive("hideShow", function() {
    return {
        restrict: 'E',
        template: 
        "<div ng:repeat='message in messages'>" +
        "  <em>{{message.message}}</em> " +
        "</div>",
        scope: {
            messages: "="
        },
        link: function(scope, element, attrs) {
            element.hide();
            scope.$watch("messages", function() {
                element.fadeIn('fast').delay(1000).fadeOut('slow');               
            });
        }
    };
});