Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <button type="button" ng-click="findA()">FIND TYPE A</button>
    <button type="button" ng-click="findB()">FIND TYPE B</button>    
    <ul class="feeds" scroll-to>
      <li ng-repeat="m in mList" ng-class="showActive($index)">{{m.s}}</li>
    </ul>
</div>

CSS

.activeMarkClass { color: red; }

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('scrollTo', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
             scope.$watch('counter', function(newVal, oldVal) {
                 if (newVal && newVal !== oldVal) {
                     $('body').scrollTop(element.find('li').eq(newVal).position().top)                     
                 }                 
            });
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.shouldScroll = true; 

    $scope.mList=[{"s":3},{"s":23},{"s":33},{"s":12},{"s":31},{"s":231},{"s":0},{"s":1},{"s":11},{"s":2},{"s":22},{"s":3},{"s":33},{"s":4},{"s":44},{"s":55},{"s":5},{"s":555},{"s":66},{"s":6},{"s":666},{"s":77},{"s":7},{"s":777},{"s":88},{"s":8},{"s":888},{"s":99},{"s":9},{"s":999},{"s":110},{"s":10},{"s":100},{"s":343},{"s":5656},{"s":456},{"s":267},{"s":89},{"s":44},{"s":56}];
    
    $scope.showActive =function(index){
            /* only if scope.counter == index ,, then set the class,, 
    NEED : to scroll to this element where index == counter */
       if(index == $scope.counter){
           return 'activeMarkClass';
       }
       return '';
    }
    
    $scope.findA =function(){
       $scope.counter=2;
    }
    $scope.findB =function(){
       $scope.counter=20;
    }
}