Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<div ng-controller="MyCtrl">
<li ng-repeat="quiz in quizzes" st-fade="{{$index}}">
                        <div class="date">{{quiz.convertedDate | date:'MMMM d, yyyy'}} | {{quiz.category}}</div>
                        <h4 class="quizname">{{quiz.title}} {{$index}} {{$index}}</h4>
                        <a href="#/quiz/{{quiz.id}}" class="arrowbutton sprite"></div></a>
</li>
</div>

JavaScript

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

function MyCtrl($scope) {
    var quizzes = [];
    for (var i = 0; i < 2; i++) {
        quizzes.push({
            title: "Test " + i,
            id: i
        });
    }
    $scope.quizzes = quizzes;
}


myApp.directive('stFade', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            elm.ready(function() {
                alert(attrs.stFade);
            });
        }
    };
});