How can I filter the values onclicking of radio button in angularjs?

Question

How can i filter category values when clicking on a radio button?

Plunker

• Actually I want to filter category values.

For Example :- in plunker we have displayed category values using of data-ng-bind. there are two radio buttons are available, 1.Moral Ethics 2. Religion & Culture. if we click the first radio button of moral ethics it's should filter only the moral ethis values and if we click the second radio button of religon & Culture it's should filter only the religon & Culture values. .

My HTML radio button:-

<div class="col-md-3">
 <label class="green"><input type="radio" name="myquestion" data-ng-model="myquestion.category" value="myquestion" ><span>Moral Ethics</span></label>
  </div>

<div class="col-md-3">
 <label class="green"><input type="radio" name="culture" data-ng-model="culture.category" value="culture" ><span>Religion & Culture</span></label>
 </div>

My HTML Filter:-

ng-repeat="question in questions | filter: myquestion | filter:culture"

My Html Data:-

 <div ng-repeat="question in questions | filter:myquestion | filter:culture">
   <small>
   <span >{{$index + 1}}.</span>
   <span data-ng-bind="question.category"></span>
   </small>
</div>

My Controller Data:-

 $scope.questions = [  
   {  
 "_id":"5863d3aaacaeddc00663bc07",
 "user":{  
 "roles":[  
 "admin"
 ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Religion & Culture",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Moral Ethics",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Environment & Health",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
  "friend_tag":[  

      ],
  "emotion":"Confused",
  "category":"Environment & Health",
  "created":"2016-12-28T15:00:58.777Z"
   },
   {  
  "_id":"5863d3aaacaeddc00663bc07",
  "user":{  
  "roles":[  
  "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Religion & Culture",
      "created":"2016-12-28T15:00:58.777Z"
   },
   {  
      "_id":"5863d3aaacaeddc00663bc07",
      "user":{  
         "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Religion & Culture",
      "created":"2016-12-28T15:00:58.777Z"
   },
   {  
      "_id":"5863d3aaacaeddc00663bc07",
      "user":{  
         "roles":[  
            "admin"
         ],
         "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136"
      },
      "friend_tag":[  

      ],
      "emotion":"Confused",
      "category":"Moral Ethics",
      "created":"2016-12-28T15:00:58.777Z"
   }
]

• please look my plunker for reference and help me.. please update the plunker as well to know the exact solution...thanks.

Answer 1

Change value of check box like below that's it

<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Moral Ethics" >                       
<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Religion & Culture" >

and your repeated div as below

<div ng-repeat="question in questions | filter:myquestion">
      <small>
                    <span >{{$index + 1}}.</span>
                      <span data-ng-bind="question.category"></span>
                  </small>

    </div>

as well as please find updated plunker