Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-controller="MyCtrl">
<div ng-repeat="speed in speeds">
   You're faster than a <span ng-bind="speed.value | speedToAnimal"></span>
</div>
</div>

JavaScript

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

myApp.controller('MyCtrl', function($scope) {
    $scope.speeds = [
	{
      "value": 33.9
    },
    {
      "value": 42.1
    },
    {
      "value": 48
    }];
	

});

// there are no values becasue I'm nog able to get the filter to work

var animals = [
	{
      "speed": 33.7,
      "animal": 'pig',
    },
    {
      "speed": 40.2,
      "animal": 'Dog',
    },
    {
      "speed": 45.4,
      "animal": 'Horse',
}];

app.filter('speedToAnimal', function() {
  return function(input, optional1, optional2) {
    // Do filter work here
    return output;
  }
});