how to filter data on a table with angularjs
<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>