title: Dynamic multi-column filtering with angularJS ng-repeat and ng-model
body: <p>I have figured out static (hard-coded) multi-column filtering; <a href="http://plnkr.co/edit/2zqc57ERYqzDOhZ36Wd8?p=preview" rel="nofollow">Here</a>.</p>
  
  <pre><code>&lt;p&gt;&lt;input type="text" ng-model="s1"&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type="text" ng-model="s2"&gt;&lt;/p&gt;
  
  &lt;ul&gt;
  &lt;li ng-repeat="x in names | filter:{name:s1} | filter:{country:s2} | orderBy:'country'"&gt;
  {{ (x.name | uppercase) + ', ' + x.country }}
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, I want to be able to create the text box filters dynamically based on the model (ie. for any # of columns).
  It seems like it should be something like <a href="http://plnkr.co/edit/9NMEd1htB5nwl7C7gvsA?p=preview" rel="nofollow">this</a>, but the text boxes do nothing.</p>
  
  <pre><code>&lt;div ng-repeat="n in names"&gt;
      &lt;input type="text" ng-model="n.column" &gt;
  &lt;/div&gt;
  
  &lt;ul&gt;
    &lt;li ng-repeat="x in names | filter:{name:name} | filter:{country:country} | orderBy:'country'"&gt;
      {{ (x.name | uppercase) + ', ' + x.country }}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've searched all around, and I find it hard to believe something like this hasn't been done [often enough to be found by my searching].</p>
  
  <p>Any help is appreciated.</p>