JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="main">
    <ul class="cf" id="filter">
        <li ng-click="getRadius(5)" class="current"><a href="#">5 km</a>
        </li>
        <li ng-click="getRadius(10)"><a href="#">10 km</a>
        </li>
        <li ng-click="getRadius(25)"><a href="#">25 km</a>
        </li>
        <li ng-click="getRadius(50)"><a href="#">50 km</a>
        </li>
        <li ng-click="getRadius(100)"><a href="#">100 km</a>
        </li>
    </ul>
     <h3>Stores within {{currentRadius}}km</h3>

    <ul>
        <li ng-repeat="store in stores | filter: radius track by store.name">{{store.name}}</li>
    </ul>
</div>

JavaScript

angular.module('test', []).controller('main', ['$scope', function ($scope) {

    $scope.currentRadius = 100;

    $scope.getRadius = function (r) {
        $scope.currentRadius = r;
    };

    $scope.radius = function (store) {
        return store.dist <= $scope.currentRadius;
    };

    $scope.stores = [{
        name: 'Close by',
        dist: 3
    }, {
        name: 'Little further',
        dist: 6
    }, {
        name: 'Pretty far',
        dist: 30
    }, {
        name: 'End of line',
        dist: 100
    }];

}]);