filter questions by checkbox

Question

I am trying to filter test/question results by column headings.

This is a two-part question:

• How to filter row data using checkboxes
• How to use unique filter to ensure duplicate checkboxes are removed

Part 1:

For example, 4 questions here have associated categories and difficulties. If I click the Perio category, only rows of questions under the Perio category will be displayed. Likewise, I want to apply such filters for correctness and difficulty.

I thought using | filter:category or | filter:difficulty against the model would work, but it doesn't filter. How can I accomplish this?

Checkboxes:

        <div class="category-filter">
            <span class="heading">Filter</span>

            Categories
            <div ng-repeat="q in questions" class="question">
                <input type="checkbox" ng-model="category"> {{q.question.cat_id}}</span>
            </div>

            Correct/Incorrect
            <div><input type="checkbox" ng-model="correct"> Correct</div>
            <div><input type="checkbox" ng-model="incorrect"> Incorrect</div>

            Difficulty
            <div ng-repeat="q in questions" class="question">
                <input type="checkbox" ng-model="difficulty"> {{q.question.difficulty}}</span>
            </div>
        </div>

Question row loops:

        <div class="questions">
            <span class="heading">Question</span>
            <div ng-repeat="q in questions | filter:category" class="question" >
                <span ng-class="{correct: q.result == 'correct', incorrect: q.result == 'incorrect'}">{{q.question.id}}) {{q.question.question}}</span>
            </div>
        </div>
        <div class="question-category">
            <span class="heading">Category</span>
            <div ng-repeat="q in questions | filter:category " class="question">
                <span>{{q.question.cat_id}}</span>
            </div>
        </div>
        <div class="question-difficulty">
            <span class="heading">Difficulty</span>
            <div ng-repeat="q in questions | filter:difficulty" class="question">
                <span>{{q.question.difficulty}}</span>
            </div>
        </div>

Sample Data structure:

                $scope.questions = [
                    {
                        question: {
                            id: 1,
                            question: 'Sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '1:10',
                            cat_id: 'Perio',
                            difficulty: 'easy'
                        },
                        result: 'correct',
                        user : 1
                    },
                    {
                        question: {
                            id: 2,
                            question: 'Jibber jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '1:25',
                            cat_id: 'XRay',
                            difficulty: 'medium'
                        },
                        result: 'incorrect',
                        user : 1
                    },
                    {
                        question: {
                            id: 3,
                            question: 'Yabber jibber jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '2:30',
                            cat_id: 'Perio',
                            difficulty: 'easy'
                        },
                        result: 'incorrect',
                        user : 1
                    },
                    {
                        question: {
                            id: 4,
                            question: 'Cool dude jabber jib jab sit error corporis natus fugit eligendi quo assumenda. Ipsum officia quia suscipit nemo et.',
                            question_time: '3:10',
                            cat_id: 'Teeth Stuff',
                            difficulty: 'hard'
                        },
                        result: 'correct',
                        user : 1
                    }
                ];

---

Part 2: unique filter

I tried using the Angular Unique Filter, as recommended here, but it's not filtering out the unique categories. Instead, it is showing only the Perio category. What it should do is only filter out the redundant Perio category, and show only unique categories.

            <div ng-repeat="q in questions | unique:'q.question.cat_id'" class="question">
                <input type="checkbox" ng-model="category"> {{q.question.cat_id}}</span>
            </div>

So far, I've only seen unique used with ngOptions and <select>, but I don't want to use select, but instead use checkboxes.