title: How to set focus on text box whenever it appears on the screen
body: <p>I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.</p>
  
  <p>The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.</p>
  
  <p>The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.</p>
  
  <p>What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.</p>
  
  <p>here's the window:</p>
  
  <pre><code>    &lt;form name="formCountdown" novalidate class="css-form"&gt;
      &lt;div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4&gt;Enter Countdown Amount&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus /&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()"&gt;Set&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
  I've also tried using this jquery code with no luck:</p>
  
  <pre><code>&lt;script&gt;
  $("#focusbtn").click(function() {
      $("#focusbox").focus();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And now I am completely lost and would really love it if someone could help me out here.</p>