title: loading large array in oi-select takes too much of time in angularjs
body: <p>I am using oi-select library, i have customized it according to my project need and i have written directive for it. The problem is its taking too much of time say 10secs to load around 3k array data. I want to minimize the time for it. Here I have created <strong><a href="http://plnkr.co/edit/OFYDkALPRGwElJB1PEiz?p=preview" rel="noreferrer">plunker</a></strong> for this. </p>
  
  <p>I have directive which loads all factory data and provides it to oi-select, in my code here is html </p>
  
  <pre><code>&lt;small&gt;&lt;b&gt;select {{MPhardwaresListDropDown.length}}&lt;/b&gt;&lt;/small&gt;
                          &lt;div style="padding-top: 7px"&gt;
                              &lt;div title="" class="selected-multiple-items"&gt;
                                      {{MPselectedHardwares.length}} selected
                              &lt;/div&gt;
                              &lt;grid-multi-select id="hardwareId" clean="clean" optionlist="MPhardwaresListDropDown" colval="name"&gt;&lt;/grid-multi-select&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>HTML code in directive looks like </p>
  
  <pre><code>&lt;div&gt;
          &lt;div ng-repeat="optionVal in tempOptionList | orderBy : ['-originalcheck','+label']" prevent-close&gt;
              &lt;div ng-if="optionVal.label"&gt;
                  &lt;label class="checkbox" ng-if="!typeFilterOptions || (optionVal.label.toString().toLowerCase().indexOf(typeFilterOptions.toLowerCase()) &gt; -1)"&gt;
                      &lt;input type="checkbox" name="checkbox1" ng-checked="optionVal.check" ng-model="optionVal.check"/&gt;
  
                      &lt;span class="checkbox__input"&gt;&lt;/span&gt;
                      &lt;span class="checkbox__label" style="color:#A9A9A9;"&gt;{{optionVal.label}}&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;div ng-if="!optionVal.label"&gt;
                  &lt;label class="checkbox" ng-if="!typeFilterOptions || (optionVal.val.toString().toLowerCase().indexOf(typeFilterOptions.toLowerCase()) &gt; -1)"&gt;
                      &lt;input type="checkbox" name="checkbox1" ng-checked="optionVal.check" ng-model="optionVal.check" ng-change="checking(typeFilterOptions)"/&gt;
  
                      &lt;span class="checkbox__input"&gt;&lt;/span&gt;
                      &lt;span class="checkbox__label" style="color:#A9A9A9;"&gt;{{optionVal.val}}&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  </code></pre>
  
  <p>angular code is too big to mention in this question please refer plunker, but this is how it loops</p>
  
  <pre><code>scope.selection = scope.selectionorg;
                  scope.checkedall=scope.checkedallorg;
                  scope.OptionList=parentScope[scope.parentListName].sort();
                  scope.tempOptionList=[];
                  var i=0;
                  for(i=0;i&lt;scope.OptionList.length;i++) {
                      scope.tempOptionList[i] = {val: scope.OptionList[i], check: false, originalcheck: false};
                  }
                  if(scope.optionListSelectedList.length&gt;0) {
                      angular.forEach(scope.optionListSelectedList, function(obj){
                          angular.forEach(scope.tempOptionList, function(obj1){
                              if(obj===obj1.val){
                                  obj1.check=true;
                                  obj1.originalcheck=true;
                              }
                          });
                      });
                  }
                  else{
                      scope.checkedall=false;
                  }
              };
  </code></pre>
  
  <p>I want something like which will load partial data on scroll it loads more data, any help will be appreciated. Thank you so much.</p>
  
  <p><strong>EDIT</strong>
  <strong>Now i have edited my plunker with limitTo in ng-repeat, for that i have written new directive which will trigger addmoreitems function when scroll will reach bottom.</strong> <strong><a href="http://plnkr.co/edit/ebakhTOCbTWR8ZOiDhe9?p=preview" rel="noreferrer">updatedPlunker</a></strong></p>
  
  <p><strong>Now problem is when i am typing and searching something its searching in only available records with respect to limitTo its not searching in all data, say now the limitTo is 50 then search is happening only in 50 records not in 3k records.</strong></p>