Only update focussed inputs viewvalue

Question

I've got 2 input fields using the same model which I use as a filter on a ng-repeat list. The first input is at the top of the list, and the second one is at the bottom. The list can be quite long. Since we see a lot of people scrolling to the bottom of the list, and still unable to find what they are looking for, we are including the search box on the bottom as well. Now the problem is that with the binding the 2 inputs show the same value, and that can lead to confusion. So I was wondering if there is any way to only update (or show) the value on the focussed input?

I couldn't find anything on this subject by myself, maybe this just isn't possible. In which case, maybe anyone of you has a different solution to this problem. Any help is greatly appreciated.

Thanks in advance!

Answer 1

This can be done in following way

JS

  var app = angular.module('myApp', []);
  app.controller('ctrl', function($scope) {
    $scope.data = [1, 2, 3, 4, 5];
    $scope.$watch('topFilter', function(old, newVal) {
      $scope.filter = old;
    });
    $scope.$watch('bottomFilter', function(old, newVal) {
      $scope.filter = old;
    });

  });

HTML

  <div ng-app='myApp'>
    <div ng-controller='ctrl'>

      <span>Filter: <input type='text' ng-model='topFilter' ></span>
      <ul>
        <li ng-repeat='item in data|filter:filter'>{{item}}</li>
      </ul>
      <span>Filter: <input type='text' ng-model='bottomFilter'></span>
    </div>
  </div>

Hope this will help you Jsfiddle link