在一定数量的动态</li> <li>标签之后添加额外的<li>标签

Question

我有一系列项目，它们是来自两个类别的搜索结果。在第一个类别搜索结果完成后，我需要动态添加一个额外的<li>标签，我无法在第一个类别的结果结尾之后放置第二个子标题

   <ul class="dropdown-menu" 
       ng-show="isOpen() && !moveInProgress" 
       ng-style="{top: position().top+'px', left: position().left+'px'}" 
       role="listbox" aria-hidden="{{!isOpen()}}">

       <li class='ng-scope active' 
           style='line-height: 30px;color:#fff;background-color: #428bca; padding-left:25px'>
         <b>Top Catalog Items</b>
         <a href='search_results_page_url' 
            style='float:right'>
            Show More Results
         </a>
       </li>
       <li role='option' 
           aria-hidden='true' 
           style='display: none'>
       </li>   
       <li ng-repeat-start="match in matches" 
         ng-class="{active: isActive($index)}" 
         ng-mouseenter="selectActive($index)" 
         ng-click="selectMatch($index, $event)" 
         role="option" 
         id="{{::match.id}}">

         <div uib-typeahead-match 
            index="$index" 
            match="match" 
            query="query" 
            template-url="templateUrl">
         </div>

       </li>
       <li class='ng-scope active' 
           style='line-height: 30px;color: #fff;background-color: #428bca; padding-left:25px' 
           ng-if="$index-1 % ($index+1/2) == 2" 
           ng-repeat-end>
           <b>Top Knowledge Articles</b>
           <a href='search_results_page_url' 
              style='float:right'>
              Show More Results
            </a>
        </li>  
     </ul>