ng-repeat and ng-class in Angular

Mixing ng-repeat and ng-class in the generating of a bulleted list.

HTML

<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="displayCtrl">
        <ul>
            <li ng-repeat="book in myBookData" 
                   ng-class="{styleText0: $index % 3 === 0, 
                              styleText1: $index % 3 === 1, 
                              styleText2: $index % 3 === 2, 
                              styleTextBg0: book.value % 3 === 0, 
                              styleTextBg1: book.value % 3 === 1, 
                              styleTextBg2: book.value % 3 === 2}">
                {{book.label}}
            </li>
        </ul>
    </div>
</body>

CSS

/*
  The next 3 styles will affect the styling of the text
*/

.styleText0{
    text-decoration: underline;
}

.styleText1{
    text-decoration: line-through;
}

.styleText2{
    text-decoration: none;
}

/*
  The next 3 styles will affect the styling of the background color of the text
*/

.styleTextBg0{
    background-color: #DDDDFF;
}

.styleTextBg1{
    background-color: #DDFFDD;
}

.styleTextBg2{
    background-color: #FFDDDD;
}

JavaScript

// declare a module
var myApp = this.angular.module('myApp', []);

// declare a controller
myApp.controller('displayCtrl', function ($scope) {
    //This would be the data that we are using.
    $scope.myBookData = [{
        label: "Book 1",
        value: 1
    }, {
        label: "Book 2",
        value: 2
    }, {
        label: "Book 3",
        value: 3
    }, {
        label: "Book 4",
        value: 1
    }, {
        label: "Book 5",
        value: 2
    }, {
        label: "Book 6",
        value: 3
    }, {
        label: "Book 7",
        value: 2
    }, {
        label: "Book 8",
        value: 1
    }];
});