JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl">
    <carousel>
        <img ng-repeat="image in images" ng-src="{{image.src}}" alt="" my-post-repeat-directive/>
    </carousel>
</body>

CSS

.carousel {
    height: 0px;
    overflow: hidden;
    transition: 0.3s height;
    text-align: center;
    position: relative;
}

JavaScript

console.clear();

angular.module("myApp", [])
    .controller("MyCtrl", ["$scope", function ($scope) {
    $scope.images = [{
        src: "http://upload.wikimedia.org/wikipedia/commons/c/c0/Gingerbread_House_Essex_CT.jpg"
    }, {
        src: "http://hookedonhouses.net/wp-content/uploads/2009/01/Father-of-the-Bride-Lookalike-house.jpg"
    }, {
        src: "http://www.effeconsulting.net/wp-content/uploads/2014/09/Beautiful-Houses-Week32_E4-House-by-DADA-Partners_01.jpg"
    }];
}])
    .directive("carousel", ["$timeout", function ($timeout) {
    return {
        restrict: "E",
        transclude: true,
        template: "<div class=\"carousel\" ng-transclude></div>",
        link: function (scope, element, attrs) {
            var div = element.children();
            scope.$on('ngRepeatDone', function () {
                element.find('img').on('load', function () {
                    var images = div.children();
                    var minHeight = Math.min.apply(null, _.pluck(images, "height"));
                    angular.forEach([div, images], function (e) {
                        e.css({
                            height: minHeight + "px"
                        });
                    });
                    scope.$apply();
                });
            });
        }
    }
}])
    .directive('myPostRepeatDirective', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            scope.$emit('ngRepeatDone')
        }
    };
});