how to separate two set of data in typehead Angular input search box?

Question

I am trying to build a search box autocomplete using Angular Bootstrap. When I start typing in the input fields, i would like the autosuggest output(html) to be something like this:

Categories

art

science

math

Courses

algebra

biology

painting

The results are split into parts - categories and courses based on two arrays. This is what i have for the angular controller

     $scope.courseSearchList = $http.get('api/courses', {cache: false});


    $scope.categorySearchList = $http.get('api/categories', {'cache': false});


  $q.all([$scope.categorySearchList, $scope.courseSearchList]).then(function(values) {

      var a = values[0].data;
      var b = values[1].data;
      var c = [];

      c.push(a);
      c.push(b);

      console.log(c[0], 'categories');
      console.log(c[1], 'courses');

      $scope.searchResults = c;
  });

so scope.searchResults will have two arrays inside [[obj],[obj]]. The first array contains all the categories' titles and the second array contains all the courses' titles. The scope is called by the input field, here it is below

<div class="custom-typehead">
    <input type="text" ng-model="selected" placeholder="search a course"
    uib-typeahead="items.title for items in searchResults | filter:$viewValue:startsWith" typeahead-template-url="searchResults.html"
    typeahead-on-select="onSelect($item, $model, $label)" typeahead-min-length="1" class="form-control" ng-init="">
  </div>

  <script type="text/ng-template" id="searchResults.html">
    <div>
        <div>
          courses

          {{match.model[0].title}}

        </div>

        <div">
          categories
          {{match.model[1].title }}
        </div>
    </div>
  </script>

I know the script and the input are wrong, but I'm still trying to find a way to split the results in two parts like the desired output above; or maybe you can offer a better solutions to this problem. Can anyone help me with this problem? Brand new to Angular and still learning this cool framework.

Your help will be much appreciated. Thanks in advance!

Answer 1

Looks like you are working in angular-bootstrap framework. If it is then this link may help you.