Variable value not updating in view when changing it in $scope

ionic-v1
1

I’ve the following simple app using Ionic 1.1 and angularJS 1.4

It scrolls a list of items in an ion-scroll and then attempts to change the highlight class when the $index is equal to the variable currentIndex.

I get the right value when I output console.log("currentIndex: " + $scope.currentIndex); but it never changes in the View.

What am I missing so that the currentIndex variable updates in the view correctly? See working code

HTML

  <body ng-app="starter" ng-controller="AppCtrl">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <ion-scroll direction="y" on-scroll="gotScrolled()" delegate-handle="signsScroll">
          <div class="sign" ng-repeat="sign in signs" ng-class="{'highlight': $index === currentIndex}">{{sign}}</div>
        </ion-scroll>

      </ion-content>
    </ion-pane>
  </body>

JS

$scope.signs = ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];

      $scope.currentIndex = 0;


      $scope.gotScrolled = function () {

        var itemLength             = $scope.signs.length,
          containerHeight        = 100,
          viewingItemNumberObj   = {"min": itemLength + 1, "max":0};

        // Apply class depending whether they are visible within the container or not
        $.each($(".sign"), function () {
          if($(this).position().top < 0 || $(this).position().top > containerHeight -10) {
            $(this).addClass("notInView");
            $(this).removeClass("inView");
          } else {
            $(this).addClass("inView");
            $(this).removeClass("notInView");
          }
        });

        // Get min and max obj position thats showing in the scroller
        $.each($(".inView"), function () {
          var theIndex = $scope.signs.indexOf($(this).text());

          if(theIndex <= viewingItemNumberObj.min ) {
            viewingItemNumberObj.min = theIndex;
          } else if (theIndex >= viewingItemNumberObj.min && viewingItemNumberObj.max <= theIndex ) {
            viewingItemNumberObj.max = theIndex;
          }
        })

        // get the number and apply it to the currentIndex
        $scope.currentIndex = Math.floor((viewingItemNumberObj.min + viewingItemNumberObj.max) / 2);
        console.log("currentIndex: " + $scope.currentIndex);
      };