How do i implement a sliding filter on ng-repeat in angularjs

Question

I am trying to implement a simple sliding filter in angular, but my ng-repeat does not seeem to be responding

The fiddle for this is here http://jsfiddle.net/zn4b89n0/1/

I have tried the following

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <p>Price 1: {{vm.priceSlider1.value}}</p>



     <rzslider rz-slider-model="vm.priceSlider1.value" rz-slider-floor="vm.priceSlider1.floor" rz-slider-ceil="vm.priceSlider1.ceil"></rzslider>


     <ul ng-repeat="friend in vm.friends  ">
      <li>{{friend.name | filter:filterFn}}</li>
    </ul>

    </div>
</div>

JS

var myApp = angular.module('myapp', ['rzModule', 'ui.bootstrap']);

myApp.controller('TestController', TestController);

function TestController($scope, $timeout) {
    var vm = this;
     vm.priceSlider1 = {
        floor: 80,
        ceil: 100,
        value: 85
    };

    vm.friends = [
    { name: "Peter",   age: 20 },
    { name: "Pablo",   age: 55 },
    { name: "Linda",   age: 20 },
    { name: "Marta",   age: 37 },
    { name: "Othello", age: 20 },
    { name: "Markus",  age: 32 }
  ];

    vm.filterFn = function(friend)
        {
            // Do some tests

            if(friend.age >= vm.priceSlider1.value )
            {
                return true; // this will be listed in the results
            }

            return false; // otherwise it won't be within the results
        };


    vm.refreshSlider = function () {
        $timeout(function () {
            $scope.$broadcast('rzSliderForceRender');
        });
    };
}

How do i get this to work, thank you for any and all assistance

Answer 1

Looks like the problem in ngRepeat part. It should be

<ul ng-repeat="friend in vm.friends | filter:vm.filterFn">
    <li>{{friend.name}}</li>
</ul>

Note, filter is in ngRepeat directive and also filter function should be referred as vm.filterFn .

Answer 2

You should use your filter in ng-repeat and execute the filter:

<ul ng-repeat="friend in vm.friends | filter: vm.filterFn() ">
      <li>{{friend.name}}</li>
</ul>

You can simplify the filter function:

vm.filterFn = function()
    {
        return function(item){
            //return the whether age attribute of each item (friend) is greater than your value
            return item['age'] >= vm.priceSlider1.value;
        }
    };

Here you can try the updated fiddle: http://jsfiddle.net/Ln9cgrve/

I hope that solves your problem...