title: how to filter data on a table with angularjs
body: <p>So, I have this table that displays users taken from a server in angularjs. Here is the users object:</p>
  
  <pre><code>'users'= [
            {
              "name":"Jane Doe",
              "gender":"female",
              "role":"admin"
            },
            {
              "name":"John Doe",
              "gender":"male",
              "role":"owner"
            }
     ]
  </code></pre>
  
  <p>Here is the table that displays this data:</p>
  
  <pre><code>    &lt;div class="col-md-4"&gt;
      &lt;h3&gt;Filter by user role&lt;/h3&gt;    
      &lt;select class="form-control" ng-model="roleOrder"&gt;
              &lt;option 
                  ng-repeat="user in users" 
                  value="{{user.role}}"&gt;{{user.role}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
          &lt;th&gt;role&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="user in users | filter:{role: roleOrder}"&gt;
              &lt;td&gt;{{user.name}}&lt;/td&gt;
              &lt;td&gt;{{user.gender}}&lt;/td&gt;
              &lt;td&gt;{{user.role}}&lt;/td&gt;
          &lt;/tr&gt;   
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The problem is, when the page loads, nothing gets displayed until I select a role from the dropdown to filter the <code>users</code>. </p>
  
  <p>My goal is to have all the users displayed initially, and then to filter the users by their roles once their corresponding role is selected in the <code>option select</code> dropdown.</p>
  
  <p>Is there a better way than the one I'm attempting? Or how do I do it right?
  Thanks for any ideas</p>