angularjs - Filtering Rails output with angular filters -

i kind of new towards implementing rails angular js. want have listing index page gives me listings using

listing.all 

my page has several filters in it.lets have filter of gender, needed when dropdown changes page listings in should refreshed , show listings selected gender.

here have done:-

/application.js/

//= require jquery //= require jquery_ujs  //= require semantic-ui  //= require dropzone  //= require cloudinary //= require angular //= require angular-resource //= require app.js //= require_tree ./angular //= require_tree . 

/listingcontroller(rails)/

def index @listings=listing.all end 

/index.html.erb/

<%=select(:listing,:gender,options_for_select([['male','male',{class:'item'}],['female','female',{class:'item'}]]),{prompt:'gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>  <div class="ui divided items" ng-controller="listingctrl" ng-init="init( <%= @listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">  <div class="item">      <div class="image">        <img src={{listing.photos.first.file_name.url}} class="header"/>      </div>     <div class="content">       <%=link_to '{{listing.title}}','{{listing}}',class:'header'%>        <div class="meta">         <span class="cinema">posted on          </span>       </div>       <div class="description">         <p>           <%='{{listing.love_for_pets}}'%>         </p>       </div>       <div class="extra">         <div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>       </div>     </div>   </div>  </div> 

/angular/controllers/listingcontroller.js/

app.controller('listingctrl', ['$scope', '$resource', function($scope, $resource) {    $scope.init = (listings)   {     $scope.listings = angular.fromjson(listings)   } }]); 

/app.js/

var app = angular.module("petforlife", ['ngresource']) 

/gemfile/

gem 'angularjs-rails' 

the index page gets loaded no listings getting displayed,also no error on console.

can please me this?

so after struggling , lot of google searches,i found answer,so posting here can someone.

here changes required:-

<div class="ui page grid">   <div class="column">     <form class="ui form">       <div class="five 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 class="field">         <label>pet</label>         <%=select(:listing,:pet_type,options_for_select([['dog','dog',{class:'item'}],['cat','cat',{class:'item'}],['bird','bird',{class:'item'}]]),{prompt:'pet'},{:'ng-model'=>'listing1.pet_type',class:'ui dropdown pet_type'})%>       </div>       <div class="field">         <label>breed</label>         <%=select(:listing,:breed_type,options_for_select(breed.all.collect{|x| [x.name,x.name,class:'item']}),{prompt:'breed'},{:'ng-model'=>'listing1.breed_type',class:'ui search dropdown disabled breed_type'})%>       </div>         <div class="field">         <label>gender</label>         <div class="ui selection dropdown">           <input type="hidden" name="gender">           <div class="default text">gender</div>           <i class="dropdown icon"></i>           <div class="menu">             <div class="item" data-value="male">male</div>             <div class="item" data-value="female">female</div>           </div>         </div>       </div>        <div class="field">         <label>gender</label>         <div class="ui selection dropdown">           <input type="hidden" name="gender">           <div class="default text">gender</div>           <i class="dropdown icon"></i>           <div class="menu">             <div class="item" data-value="male">male</div>             <div class="item" data-value="female">female</div>           </div>         </div>       </div>        <!--div class="right floated field">         <label style="visibility:hidden;">search</label>         <div class="ui left labeled icon button filter">           <i class="filter icon"></i>           reset         </div>       </div-->     </div>   </form> </div> </div>  <div class="ui page grid tabmenu">   <div class="ui secondary pointing filter menu">      <!--a class="blue item" data-tab="saved">saved</a-->     <a class="active green item" data-tab="all">all</a>     <a class="red item" data-tab="favorite">favorite</a>     <a class="blue item" data-tab="user_listing">your listings</a>   </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,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true">        <div class="image">       </div>       <div class="content listing_content">         <i class="right floated large icon"></i>         <i class="right floated large star icon"></i>          <%=link_to '{{listing.title}}','{{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> 

the change required creating separate div initialisation , different div ng-repeat.

rest remains same.

hope someone.