Angular directive with filter

Show how to define a filter and use it in a directive

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<body ng-app="app" ng-controller="testCtrl as ctrl">
<filtered-devices devices="ctrl.devices"
         items="3" sortKey="type"></filtered-devices>
</body>

JavaScript

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

app.controller("testCtrl", function($scope) {
    var ctrl = this;
    ctrl.devices = [{
		type: 'gadget',
		strength: 5
	}, {
		type: 'generic',
		strength: 1
	}, {
		type: 'gadget',
		strength: 8
	}, {
		type: 'gadget',
		strength: 4
	}, {
		type: 'generic',
		strength: 9
	}];
});

app.directive('filteredDevices', function() {
    return {
        restrict: 'E',
        scope: {
            devices: '=',
            items: '@',
	    sortKey: '@'
        },
        template: [
			'<ul>',
				'<li ng-repeat="device in devices | deviceFilter:items:sortKey">',
					'{{device}}',
				'</li>',
			'</ul>'].join('\n'),
        replace: true,        
    };
});

app.filter('deviceFilter', function() {

  // In the return function, we must pass in a single parameter which will be the data we will work on.
  // We have the ability to support multiple other parameters that can be passed into the filter optionally
  return function(input, count, key) {

  count = count || 5;
  key = key || 'strength'

    var output = input.sort(function(a, b) {
		if (a[key] > b[key]) {
			return 1;
		}
		else {
			return -1;
		}
	});

    return output.slice(0, count);

  };
});