angular .module('app', []) .directive('famousPeople', function () { return { restrict: 'E', template: [ '<div>', '<p>0', '<input type="range" min="0" max="100" step="1" ng-model="ctrl.inputAge" />', '100</p>', '<span>current min age: {{ ctrl.inputAge }}</span>', '<ul>', '<li ng-repeat="person in ctrl.people | ageFilter:ctrl.inputAge ">{{ person.name }} ({{ person.age }})</li>', '</ul>', '</div>' ].join(''), controllerAs: 'ctrl', controller: function() { var ctrl = this; ctrl.inputAge = 20; ctrl.people = [{ name: 'Justin Bieber', age: 21 }, { name: 'Miley Cyrus', age: 23 }, { name: 'John Legend', age: 37 }, { name: 'Betty White', age: 94 }, { name: 'Roger Waters', age: 72 }, { name: 'Larry Page', age: 42 }, { name: 'You played around with the code, awesome!', age: 10 } ] } } }) .filter('ageFilter', function() { return function(input, minAge) { return input.filter(function (person) { return person.age >= +minAge; }); } }); angular.bootstrap(document.querySelector('.app'), ['app']);
<div class="app"> <famous-people></famous-people> </div>