ng-repeat vs reading specific results from LocalStorage in AngularJS

I'm building an app intended to work 100% offline that displays 100 objects from an array using ng-repeat on the first page.

All results are recorded to and read from LocalStorage.

The ng-repeat works fantastic, but I'm currently building a filter and wonder how can I manage to display results not included in the first 100 item list.

For instance, I want to be able to display results upon date range. All objects have a date property, and the DateRangePicker works OK binding with the model of the input once a date range is selected, but in order to display all results matching this range, I assume ng-repeat is no longer useful, as have to be able to make a call into LocalStorage and retrieve data from there.

I'm a bit lost conceptually on which would be the next step, as my Angular skills are not brilliant.

Any pointers on how to procede?

Here's how my current ng-repeat list looks like:

<div class="row wop-row" 
     ng-repeat="record in recordlist | filter: search | limitTo : -100" 
     ng-class="{ 'wop-cancelled': record.cancelled, 'wop-commented' : record.comment}">
      <div class="col-md-1">{{record.date}}</div>
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-2">{{record.driver}}</div>
      <div class="col-md-2">{{record.from}}</div>
      <div class="col-md-1" ng-show="editItem == false" ng-hide="editItem">{{record.pax}}</div>
      <div class="col-md-1" ng-show="editItem == true && !record.arrival" ng-hide="!editItem">
        <select class="form-control" ng-model="record.pax">
            <option>Driver</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select>
      </div>
</div>

And my filter:

<form role="form">
  <div class="form-group col-md-3">
    <input type='text' 
           date-range-picker 
           placeholder="Date range" 
           class="form-control" 
           id="datetimepicker1" 
           data-date-format="DD/MM/YYYY" 
           ng-model="search.date"/>
  </div>
  <div class="form-group col-md-1">
    <input class="form-control" placeholder="Time" ng-model="search.time">
  </div>
  <div class="form-group col-md-1">
    <input class="form-control" placeholder="Car" ng-model="search.car">
  </div>
  <div class="form-group col-md-2">
    <input class="form-control" placeholder="Driver" ng-model="search.driver">
  </div>
  <div class="form-group col-md-2">
    <input class="form-control" placeholder="From" ng-model="search.from">
  </div>
  <div class="form-group col-md-1">
    <input class="form-control" placeholder="Pax" ng-model="search.pax">
  </div>
</form>

If I understand your question it appears you are basically doing the right thing. You just need to make your filter call a function that does the appropriate filtering of the objects.

<div class="row wop-row" 
 ng-repeat="record in recordlist | filter: mysearch(record) | limitTo : -100" 
 ng-class="{ 'wop-cancelled': record.cancelled, 'wop-commented' : record.comment}">

and then

 $scope.mysearch = function(value) {

       return function(value) {
          // Do whatever the current filter is here. Like checking each 'value' to be
          // in a date range if the user has chosen a date. 
       }
 };