Button ng-class doesn't apply

Question

I am trying to create custom pager for ion-slide-box. This is codepen sample

This is my js:

$scope.currentSlide = 0;
$scope.pagerClick = function (index) {
    $ionicSlideBoxDelegate.slide(index);
}

$scope.slideChanged = function (index) {
    $scope.currentSlide = index;
}

This is html file:

<ion-slide-box does-continue=true show-pager=false on-slide-changed="slideChanged($index)">
        <ion-slide class="item-image" ng-repeat="i in getNumber(number) track by $index">
            <img src='{{images[$index]}}' />
        </ion-slide>
</ion-slide-box>
<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
        <a class="button" href ng-class="{activated: $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>
</div>

Almost all works fine, except one thing. When I click on my pager buttons it doesn't change active button in pager. When I swype slides all buttons change style correctly. I think it may be because of $index - I have two such variables. But I can't understand or fix it.

Answer 1

I finally solved this problem which was because activated is inline class of button. When I push button this class was applying, but when I unpress button Angular delete this class. I create my class active-button and all is now working.

<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
        <a class="button" href ng-class="{'active-button': $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>

and css

.active-button{
    background-color: #b2b2b2 !important;
    box-shadow: none !important;
    color: #fff !important;
}