Создание списка покупок с помощью «Checklist-model» и «dirPagination»

Question

Я хотел бы создать сайт для покупок, используя AngularJS (версия: 1.6.6)

Я использовал директивы checklist-model и angularUtils.directivces.dirPagination для разработки.

У меня проблема с созданием списка товаров с функциями категорий.Например, продукты будут разделены на три категории (т.е. Cat-A, Cat-B и Cat-C).

Я использовал checklist-model для реализации трех флажков, которые содержат значение трех категорийОднако, как я могу отфильтровать список продуктов в соответствии с выбранным флажком?

Примеры: Если отмечены «Cat-A» и «Cat-B», результат отфильтровывает все не связанные продукты(т.е. продукты Cat-C)

Вот некоторые из моих кодов:

<div class="col-12 col-lg-4" dir-paginate="item in datas|filter:select.types|itemsPerPage:3">
    <div>
         <!--The product details-->
    </div>
</div>

Ниже приведены флажки категории:

<div>Type</div>
       <hr>
<div ng-repeat="t in type">
       <label style="font-size: 0.9vw;padding-left: 1vw;">
           <input type="checkbox" checklist-model="select.types" checklist-value="t"> {{t}}
       </label>
</div>

<script>
$scope.select={
    targets:[],
    types:[]
};
</script>

Пример данных:

[{"id":"22","p_name":"P3","p_cat":"Cat-C","p_detail":"--","p_price":"333","image":"5bf7f65e8818f.png","created":"2018-11-23 12:45:18","modified":"2018-11-23 12:45:18"},{"id":"24","p_name":"P2","p_cat":"Cat-B","p_detail":"--","p_price":"123","image":"5bfa20ad35a7d.PNG","created":"2018-11-25 04:10:21","modified":"2018-11-25 04:10:21"},{"id":"25","p_name":"P1","p_cat":"Cat-A","p_detail":"--","p_price":"1","image":"5bfa20b7c1c48.PNG","created":"2018-11-25 04:10:31","modified":"2018-11-25 04:10:31"}]

Извините за плохое объяснение.Надеюсь, кто-нибудь может мне помочь!