Javascript 如何设置页面加载的活动状态

我的导航栏中有以下一组引导导航药片。正如您可以从我的角度“ng init”代码中看到的，我正在页面加载中将“dateState”设置为“pass”。我的问题是我的“过去事件”导航丸在页面加载时没有突出显示。我必须明确地点击导航药片，以获得它们的“活跃”亮点。我如何设置在“ng init”中设置的任何一个药丸，以便在页面加载时也显示其活动状态？将来我可能会将ng init更改为“future”或“live”，所以我不想只硬编码“active”状态

<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
    <li><a href ng-click="dateState = 'live'">Live!</a></li>
    <li><a href ng-click="dateState = 'past'">Past Events</a></li>
    <li><a href ng-click="dateState = 'future'">Future Events</a></li>
</ul>

---

通过将上述代码更改为以下代码，我能够实现我的目标：

<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
    <li><a href ng-click="dateState = 'live'" ng-class="{'activeDate': dateState=='live'}">Live!</a></li>
    <li><a href ng-click="dateState = 'past'" ng-class="{'activeDate': dateState=='past'}">Past Events</a></li>
    <li><a href ng-click="dateState = 'future'" ng-class="{'activeDate': dateState=='future'}">Future Events</a></li>
</ul>

---

您不能将highlight类添加到init上的相关a吗？

a.activeDate {
    background-color: white;
}