title: How to set focus to dynamically added element after AngularJs ng-click?
body: <p>I have an Add button that is bound to ng-click="add()" and within this function, it adds a new object to the angular array which in turn adds a new row in my html table that uses ng-repeat. However, i want to set focus to the new textarea once the element is rendered on the page. Currently it seems that i am trying to set focus before the element is actually on the page. Any ideas around this?</p>
  
  <p>Markup:</p>
  
  <pre><code> &lt;button id="AddNote" type="button" class="btn btn-primary btn-sm" ng-click="add()"&gt;New&lt;/button&gt;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>$scope.add = function () {
      $scope.notes.splice(0, 0, {
          NoteID: 0,
          SubmissionID: 0,
          Value: '',
          CreatedDate: new Date(),
          CreatedDateDisplay: '',
          CreatedByUserID: 0,
          CreatedByUserDisplay: '',
          IsNew: true,
          ShowRemove: true,
          IsDirty: true,
          IsDisabled: false
      });
  
      $scope.showTable = true;
      //$('tr[index="0"]').first('td').find('textarea').focus();
      //$('#NotesGrid tr:last').first('td').find('textarea').focus();
      $('#AddNote').prop('disabled', true);
      $('#SaveNote').show();
  };
  </code></pre>