title: angular js search using filter keyword to display array items grouped by headers
body: <p>I am trying to display results from an array :--</p>
  
  <pre><code>$scope.headerValue1 =[{title:"Source",list:[]},{title:"Target",list:[]},{title:"Local Variables",list:[]},{title:"Constants",list:[]}];
  </code></pre>
  
  <p>inside my search bar using <em>li and ng-repeat</em> tags (one for displaying the title and then followed by one for listing each items for that title) using <strong>filter:model name of search textbox</strong>.
  There is a search box to search for the list items.I want to :-</p>
  
  <ul>
  <li>Display the list items based on the search keyword so that the header title corresponding to that list item is also displayed.</li>
  <li>Display all the list items if user is typing a particular title in the search box.</li>
  </ul>
  
  <p>I am giving the code below :-</p>
  
  <pre><code>var inputString = '&lt;span class="btn-group searchable-dropdown" data-ng-show=" true"&gt;'
  
  + '&lt;button class="btn btn-sm btn-default btn-block dropdown-toggle"'
  // +'data-ng-disabled="false"
  // '
  + 'data-toggle="dropdown"&gt;'
  + '&lt;span data-ng-if="true" class="ng-binding ng-scope"  &gt;'
  + '{{curr_rules['
  + idx
  + '].rhs.args['
  + i
  + '].selectedVal}}'
  + '&lt;/span&gt;'
  // +'&lt;!--
  // end
  // ngIf:
  // !ruleDefinitionArgs.selectArgValue
  // --&gt;
  // '
  + '&lt;span class="caret"&gt;&lt;/span&gt;'
  + '&lt;/button&gt;'
  
  + '&lt;ul class="dropdown-menu scrollable-menu" &gt;'
  
  + '&lt;li&gt;'
  + '&lt;div class="dropdown-header"&gt;'
  + '&lt;input type="text" class="form-control input-sm ng-pristine ng-untouched ng-valid" style="width: 50%;" data-ng-click="searchBox($event);"'
  // +'data-ng-model="ruleDefinition.columnFilter"
  // '
  + 'data-ng-model="curr_rules['
  + idx
  + '].rhs.args['
  + i
  + '].searchField"/&gt; '
  + '&lt;button style="margin-left: 5px" ng-click="addConstant(curr_rules['
  + idx
  + '].rhs.args['
  + i
  + '].searchField,$event)" class="btn btn-sm btn-success"&gt;Add Constant&lt;/button&gt;'
  + '&lt;/div&gt;'
  + '&lt;/li&gt;'
  + '&lt;li class="divider"&gt;&lt;/li&gt;'
  
  + '&lt;li data-ng-repeat="headeritem in headerValue1 | filter:curr_rules['
  + idx
  + '].rhs.args['
  + i
  + '].searchField" data-ng-if="headeritem.list.length&gt;0" &gt;&lt;span class="list-head"&gt;&lt;b&gt;{{headeritem.title}}&lt;/b&gt;&lt;/span&gt;'
  + '&lt;ul class="search-list-dropdown"&gt;'
  + '&lt;li  data-ng-repeat="item in headeritem.list| filter:curr_rules['
  + idx
  + '].rhs.args['
  + i
  + '].searchField : startsWith" data-ng-click="populateValSource(curr_rules,'
  + idx
  + ','
  + i
  + ',item,headeritem.title);"'
  + 'data-ng-value=item'
  + '&gt;'
  + '&lt;a href="javascript:void(0)"&gt;{{item}}&lt;/a&gt;'
  + '&lt;/li&gt;'
  + '&lt;/ul&gt;'
  + '&lt;/li&gt;'
  
  + '&lt;/ul&gt;'
  
  + '&lt;/span&gt;');
  
   var input = angular.element(inputString);
  </code></pre>
  
  <p>I am trying to implement a searchable dropdown by dynamically appending this element inside which there is the search textbox and below it is data displayed within ul/li tags. 
  I have tried filter keyword ,but it does not serve both the purpose mentioned at the same time.
  Need help,Thanks</p>