Autofocus an Input Element in AngularJs
<p>I have a small search bar which is hidden initally. With a ng-click i set "filter.show" to true and the searchbar becomes visible. As soon as this happens i want the text input inside to be focused automatically. </p>

<p>I'm using Angular 1.5 and Angular Material and found the focus-me option as presented below. But this doesn't work somehow and I don't understand what's the problem. Maybe someone can help me. </p>

<p>The html presented below uses the same controller for the button and the input.</p>

<p>
   
</p>

<pre><code>&lt;md-toolbar class="md-table-toolbar md-default" ng-show="filter.show &amp;&amp; !selected.length" aria-hidden="false"&gt;
  &lt;div class="md-toolbar-tools"&gt;
    &lt;md-icon md-svg-icon="magnify"&gt;&lt;/md-icon&gt;
    &lt;form flex="" name="filter.form"&gt;

      &lt;md-input-container class="md-block" flex="" style="margin-bottom:0"&gt;
        &lt;label&gt;Search&lt;/label&gt;
        &lt;input type="text" focus-me="filter.show" ng-model="query.filter" ng-model-options="filter.options" aria-invalid="false"&gt;
      &lt;/md-input-container&gt;

    &lt;/form&gt;
    &lt;button class="md-icon-button md-button md-ink-ripple" type="button" ng-click="removeFilter()"&gt;
      &lt;md-icon md-svg-icon="close"&gt;&lt;/md-icon&gt;
      &lt;div class="md-ripple-container"&gt;&lt;/div&gt;
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/md-toolbar&gt;
</code></pre>