Filter elements of an ng-repeat list from another ng-repeat list

Question

I have only one array which shows title, description and category.
As I don't know the categories (because the users can add their own) I did the categories list with an ng-repeat, same to show the items.
And I need the items to be able to filter with two filters: with a text input which filters by title (this one works really nice) and with the categories buttons (which doesn't work).

Here's how I did the ng-repeat for the categories:

<div class="list_categories">
 <!-- I put 'ng-repeat-start' and 'ng-repeat-end' to be able to add the value "checked" to the first input -->
 <!-- it wasn't working and @tbone849 already helped me with that-->
 <label ng-click="clearAll()" ng-repeat-start="x in categories" ng-if="$first">
   <input type="radio" id="optradio" name="optradio" ng-model="searchCategory.Category" value="{{x}}" checked="checked">
   <p>{{x}}</p>
 </label>
 <label ng-click="clearAll()" ng-repeat-end ng-if="!$first">
   <input type="radio" id="optradio" name="optradio" ng-model="searchCategory.Category" value="{{x}}">
   <p>{{x}}</p>
 </label>
</div>

And here's the ng-repeat of the items:

<div class="card" ng-repeat="x in items | filter:searcher | filter:searchCategory" >
  <div class="title-space">
    <h2>{{x.Title}}</h2>
  </div>
  <div class="description-space">
    <p>{{x.Description}}</p>
  </div>
</div>

For more details of my code I did a working example in this Plunker.
I hope someone can help me to make the Categories filter to work.

Answer 1

Use ng-checked to handle checking the first option.

<label ng-click="clearAll()" ng-repeat="x in categories">
    <input type="radio" id="optradio" ng-model="searchCategory.Category" name="optradio" ng-value="{{x}}"  ng-checked="$first">
   <p>{{x}}</p>
</label>