In this particular scenario, a new field is introduced by including a blank row to $scope when the last field loses focus, provided it is not empty. However, there seems to be an issue where the newly added field is not included in the DOM in time to receive focus.
Is there a method to identify when Angular has completed appending the new field to the DOM so that focus can be directed towards it?
Please refrain from utilizing "timer" solutions; as the duration for DOM changes varies, I require this switch of focus to occur swiftly. There must be a more efficient approach!
HTML
<div ng-app='a' ng-controller='b'>
<input type="text" ng-repeat="row in rows" ng-model="row.word" ng-model-options="{'updateOn': 'blur'}">
</div>
JS
angular.module('a', []).controller('b', function ($scope) {
$scope.rows = [{'word': ''}];
$scope.$watch('rows', function (n, o) {
var last = $scope.rows[$scope.rows.length - 1];
last.word && $scope.rows.push({'word': ''});
}, true);
});