Two ng-repeat, $index not sending the right value in the second ng-click

I have two ng-repeat that follow each other in the same directive:

<section slider class="slider">
    <nav>
        <ul>
            <li ng-repeat="slide in slider[0]" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index)" class="no-text"></li>
        </ul>
    </nav>
    <ul>
        <li ng-repeat="slide in slider[0]" ng-class="{'active':isCurrentSlideIndex($index)}" class="grid" ng-click="setCurrentSlideIndex($index+1)">
            <img ng-src="{{slide.image}}" alt="" />
        </li>
    </ul>
</section><!-- section.slider -->

The first ng-click="setCurrentSlideIndex($index)" is working just fine. But the second one always sends the last value of the $index (for example, if there is 3 pictures, it will always be 2). (The isCurrentSlideIndex($index) works properly.)

Do you have any ideas how to fix this?

Thank you

Update:

angular.module('app')
  .directive('slider', function () {
    return {
      restrict: 'A',
      scope: true,
      controller: function($scope){
        $scope.currentIndex = 0;
        $scope.setCurrentSlideIndex = function(index){
        $scope.currentIndex = index;
        };
        $scope.isCurrentSlideIndex = function(index){
        return $scope.currentIndex === index;
        };
      }
    };
  });