ng-class Issue

page.html

<ul class="search-results" ng-show="searchKeyword != '' && inputIsFocused">
    <li ng-repeat="provider in providerList | searchFilter:searchFilterType:searchKeyword" ng-class="{'highlighted': provider == arrowSelectedItem}" ng-click="setSearchKeyword(provider)">{{provider.name}}</li>
</ul>

script.js

	$scope.arrowSelectedItem = null;
	$scope.filteredProviderList = null;

	function moveSelectedItem(direction) {
		var index = $scope.filteredProviderList.indexOf($scope.arrowSelectedItem);
		if( direction == 'up' && index <= 0 ) {
			$scope.arrowSelectedItem = null;
		} else if( direction == 'up' && index > 0 ) {
			$scope.arrowSelectedItem = $scope.filteredProviderList[index-1];
		} else if( direction == 'down' && index < $scope.filteredProviderList.length - 1 ) {
			$scope.arrowSelectedItem = $scope.filteredProviderList[index+1];
		}
	}

	var keyHandler = function(e) {
		// If they hit enter while they've highlighted an item from the dropdown
		if( e.keyCode === 13 && $scope.arrowSelectedItem != null ) {
			$scope.setSearchKeyword($scope.arrowSelectedItem);
		}
		if( $scope.searchKeyword.length == 0 ) {
			$scope.arrowSelectedItem = null;
		}
		if( $scope.inputIsFocused && $scope.searchKeyword != '' ) {
			if( e.keyCode === 38 ) {
				if( $scope.arrowSelectedItem != null ) {
					moveSelectedItem('up');
				}
			} else if ( e.keyCode === 40 ) {
				moveSelectedItem('down');
			}
		}
		// If a letter key is pressed, filter the list so that our down arrow selection list is correct
		if ( $scope.inputIsFocused && e.keyCode >= 48 && e.keyCode <= 90 ) {
			$scope.filteredProviderList = searchFilterFilter($scope.providerList, $scope.searchFilterType, $scope.searchKeyword);
		}
	}