I'm having some trouble getting angular to properly filter my results. I'm attempting to use a custom filter that gets arguments from a minimum input and a maximum input.

/index.html

<input ng-model=minHorsepower>

<input ng-model=maxHorsepower>

...

tr(ng-repeat=plane in planes | filter:horsepowerFilter)

/controllers.js

//Horsepower filter

$scope.horsepowerFilter = function(plane) {

  var ret = true;



  if($scope.minHorsepower && $scope.minHorsepower > plane.horsepower) {

    ret = false;

  }



  if($scope.maxHorsepower && $scope.maxHorsepower < plane.horsepower) {

    ret = false;

  }



  return ret;

};



$scope.planes = [

  {

      'make' : 'Piper',

      'model' : 'Arrow',

      'modelNumber' : 'PA-28R-180',

      'horsepower' : '180',

      'gear' : 'retractable',

  },

  {

      'make' : 'Piper',

      'model' : 'Arrow',

      'modelNumber' : 'PA-28R-200',

      'horsepower' : '200',

      'gear' : 'retractable',

  }

];

It works INITIALLY when I set $scope.minHorsepower/$scope.maxHorsepower in controllers.js, but only initially, not when I put something else in the <input>s. Furthermore, it prefills the inputs AND filters the results. It just doesn't work properly when I change the value of the inputs.

I've referenced this Stack Overflow thread, but I can't find any material differences in our code... AngularJS multiple filter with custom filter function

Thanks for the help.