<div class="toc">
    <ul>
        <li ng-repeat="m in toc.modules" class="toc-module" id="toc-m-{{m.id}}">
            <span>{{m.title}}</span>
            <ul>
                <li ng-repeat="l in m.lessons" class="toc-lesson" id="toc-l-{{l}}" ng-class="{active: l==params.lessonId}">
                    <span ng-click="toggleLesson(l)">{{m.lesson[l].Title}}</span>
                    <ul>
                        <li ng-repeat="p in m.lesson[l].Pages" class="toc-page" ng-class="{active: l==params.lessonId && $index+1==params.pageNumber}">
                            <a href="/{{l}}/{{$index+1}}" ng-click="hideTOC(true)">{{p.Title}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="click-catcher" ng-click="hideTOC(false)"></div>
</div>