Implementing Number Range Search On Multiple Columns Angular Smart Table

Question

I am trying to create a table using angular-smart-table which has multiple numerical columns. I have to implement range search on all of them. I have created an directive and an custom filter to filter the data. I am able to implement it for single column but when I use the same directive in more than one time, range search stops working. The problems faced are mentioned below

1. Unable to search result in range
2. All the 'lower' text boxes show same value when value is entered in one text box.
3. All the 'higher' text boxes show same value when value is entered in one text box.

I have created a plunk similar to requirement. Please help!!

myApp.directive('stNumberRange', ['$timeout', function ($timeout) {
  return {
    restrict: 'E',
    require: '^stTable',
    scope: {
      lower: '=',
      higher: '='
    },
    template: '<input type="number" class="form-control input-sm" ng-change="rangeChanged()" step="0.01" ng-model="higher"/><input class="form-control input-sm" ng-change="rangeChanged()" type="number" step="0.01" ng-model="lower"/>',
    link: function (scope, element, attr, table) {
      var predicateName = attr.predicate;

      scope.rangeChanged = function () {
        var query = {};

        if (scope.lower) {
          query.lower = scope.lower;
        }

        if (scope.higher) {
          query.higher = scope.higher;
        }

        table.search(query, predicateName)
      }
    }
  };
}]);