title: Setting focus by id AngularJS
body: <p>Upon clicking <code>+</code> button, the focus is shifted to another input field in HTML. I want to keep the focus on the current input field unless the user clicks on another input field. That's when I want to move the focus to the clicked input field.</p>
  
  <pre><code>&lt;div layout="row" layout-align="center center"&gt;
      &lt;md-input-container  class="md-block" flex="50"&gt;
          &lt;input required id="circleTimeWordListEditText" type="text" placeholder="Words List" ng-model="circleTime.word"/&gt;
  
          &lt;div ng-messages="$error"&gt;
              &lt;div ng-message="required"&gt;This is required.&lt;/div&gt;
          &lt;/div&gt;
      &lt;/md-input-container&gt;
  &lt;/div&gt;
  
  &lt;div layout="row" layout-align="center center"&gt;
      &lt;md-button class="md-raised md-primary" type="submit"
                 ng-click="circleTime.onAddButtonClicked()"&gt;+
      &lt;/md-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently I am doing this:</p>
  
  <pre><code>document.getElementById('circleTimeWordListEditText').focus();
  </code></pre>
  
  <p>and I have tried this as well but it gives me NOSEL error.</p>
  
  <pre><code>angular.element('circleTimeWordListEditText').focus();
  </code></pre>
  
  <p>I tried this solution too:</p>
  
  <pre><code>mainApp.factory('focus', function($timeout, $window) {
      return function(id) {
          // timeout makes sure that it is invoked after any other event has been triggered.
          // e.g. click events that need to run before the focus or
          // inputs elements that are in a disabled state but are enabled when those events
          // are triggered.
          $timeout(function() {
              var element = $window.document.getElementById(id);
              if(element)
                  element.focus();
          });
      };
  });
  
  mainApp.directive('eventFocus', function(focus) {
      return function(scope, elem, attr) {
          elem.on(attr.eventFocus, function() {
              focus(attr.eventFocusId);
          });
  
          // Removes bound events in the element itself
          // when the scope is destroyed
          scope.$on('$destroy', function() {
              elem.off(attr.eventFocus);
          });
      };
  });
  
  
  onAddButtonClicked : function(elem) {
              //do stuff
  
              focus('circleTimeWordListEditText');
              /*var temp = document.getElementById('circleTimeWordListEditText');
              alert(temp);
              temp.focus();
              angular.element('circleTimeWordListEditText');
              angular.element('circleTimeWordListEditText').focus();*/
          }
      },
  </code></pre>
  
  <p>but it doesn't work either.</p>
  
  <p>What is the recommended solution to this problem?</p>