Button ng-class doesn't apply - angularjs

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;
}