title: Smart Table Angularjs external search box
body: <p>Good morning, i have a smart table on my angualrJS spa but i need to place the search fields outside the table for ui design purposes. Can it be done? Here a sample code of my table</p>
  
  <pre><code>&lt;table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped"&gt;        
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Tipo&lt;/th&gt;
        &lt;th&gt;Da&lt;/th&gt;
        &lt;th&gt;A&lt;/th&gt;
        &lt;th&gt;Data&lt;/th&gt;
        &lt;th&gt;Durata&lt;/th&gt;
        &lt;th&gt;Costo&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="'destination'" /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="'answerTime'" /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="'duration'" /&gt;&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="row in displayedCollection"&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;{{row.destination}}&lt;/td&gt;
        &lt;td&gt;{{row.answerTime | date : 'short'}}&lt;/td&gt;
        &lt;td&gt;{{row.duration | number}}&lt;/td&gt;
        &lt;td&gt;{{row.cost | currency : '€'}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;td colspan="5" class="text-center"&gt;
          &lt;div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"&gt;&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>i need to place the st-search field (or something similar) outside the  tags.</p>
  
  <p>here the sample, on top default, and on bottom desired</p>
  
  <p><a href="http://imgur.com/C24pk0K" rel="nofollow">http://imgur.com/C24pk0K</a></p>