AngularJS Touch Carousel

This is a follow-up to one of my previous questions and it is what I'm looking far but I can't seem to get it working. This is what I'm trying to work with here and this is what I've tried:

index.html

<head>
    <title>Building Angular Directives</title>

    <link href="css/angular-carousel.css" rel="stylesheet" type="text/css"/>

    <!-- Angular Components -->
    <script type = "text/javascript" src = "angular/angular.js"></script>
    <script type = "text/javascript" src = "angular/angular-route.js"></script>
    <script type = "text/javascript" src = "angular/angular-mocks.js"></script>
    <script type = "text/javascript" src = "angular/angular-loader.js"></script>

    <!-- App definition -->
    <script type = "text/javascript" src = "app.js"></script>

    <!-- Directives -->
    <script type = "text/javascript" src = "directives/my-directives.js"></script>

    <!-- Controllers -->
    <script type = "text/javascript" src = "controllers/my-controllers.js"></script>

    <!-- Custom Carousel -->
    <script type = "text/javascript" src = "js/angular-touch.min.js"></script>
    <script type = "text/javascript" src = "js/angular-carousel.js"></script>

</head>

<body>
 <div ng-controller = "HomeController">
        <section remembered at-greeting='customer'
                 equals-greeting='customer'
                 amper-greeting='getGreeting()'>
        </section>
        <hr/>
        <ul rn-carousel class="image">
            <li ng-repeat="image in sportImages">
                <div class="layer">{{image}}</div>
            </li>
        </ul>
    </div>
</body>

my-controllers.js

myApp.controller('HomeController', ['$scope', function ($scope) {

    // Test
    $scope.greeting = "Hello World - from the controller";

    $scope.sportImages = [
        'http://placekitten.com/g/200/300',
        'http://placekitten.com/g/200/301',
        'http://placekitten.com/g/200/303'
    ];

}]);

And I declare a dependency on the angular-dependency during the applications creation:

app.js

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

Nothing appears on the screen and nothing appears in the error console which suggests that everything is being loaded - perhaps just not in the correct order?

Any suggestions? Thanks

The actual reason why it wasn't working was because of the height not being set in the CSS for the unordered list, as well as a misunderstanding of how it works.

Here's a working Plunkr of it working with all the animations currently available. Though I will be refining this to move out the internal styling and package the whole thing in a new directive.

And the code just in case it disappears from Plunkr:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Building Angular Directives</title>
    <link href="css/angular-carousel.min.css" rel="stylesheet" type="text/css" />
    <style>
        ul {
            height:300px;
            width: 600px;
            background:blue;
        }
        img.alignLeft {
            float: left;
        }
    </style>

    <!-- Angular Components -->
    <script type="text/javascript" src="angular/angular.js"></script>
    <script type="text/javascript" src="angular/angular-touch.js"></script>
    <script type="text/javascript" src="angular/angular-carousel.js"></script>

    <!-- App definition -->
    <script type="text/javascript" src="app.js"></script>

    <!-- Controllers -->
    <script type="text/javascript" src="controllers/my-controllers.js"></script> 
</head>

<body>
    <div ng-controller="HomeController">
        <ul rn-carousel rn-carousel-controls class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="zoom" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="hexagon" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slideAndFade" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
        <ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="none" class="image">
            <li ng-repeat="images in kittens">
                <div ng-repeat="image in images">
                    <img class="alignLeft" ng-src="{{image}}"/>
                </div>
            </li>
        </ul>
        <hr/>
    </div>
</body>

And here is the collection in the HomeController that I'm using:

$scope.kittens = [
        ['http://placekitten.com/g/200/300','http://placekitten.com/g/200/301','http://placekitten.com/g/200/303'],
        ['http://placekitten.com/g/200/301','http://placekitten.com/g/200/303','http://placekitten.com/g/200/300'],
        ['http://placekitten.com/g/200/303','http://placekitten.com/g/200/300','http://placekitten.com/g/200/301']
    ];

I remember having to set a height to force it open, something like.

 .layer { height:300px }