Angular js filter with rails incorrectly functioning - ruby-on-rails

Question

Hi I am trying to use angular filtering in my rails app,but I do not know why it's not behaving in the correct way.
So I have a gender dropdown selection on which i filter my listings array.
Here are the codes:
/listing.html.erb/
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="six fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
</div>
</form>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %> )" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender}">
{{listing1.gender}}
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','listings/{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
It is getting all the data properly,everything is working fine,except for the filter.When i select female ,it gives me filtered output but for male I get all the listings.
Can someone please help in this.

Answer 1

The reason you're getting all results for "Male" is because the filter, as it's being used, returns partially matching results. To get an exact match within your filtering, modify your ng-repeat to this:
ng-repeat="listing in listings | filter:{gender : listing1.gender : true}
This should return strictly "Male" or "Female", and not match male to the partially matching female results.
Check out the docs on filter, specifically the arguments section that covers this option.
https://docs.angularjs.org/api/ng/filter/filter
Hope it helps!