To my knowledge, there is no better/shorter way to let users edit an element right away without triggering focus
, so I would work on improving what you have to meet Angular's application design principles.
According to the "Angular Way", DOM manipulation must happen within a directive, business logic should be contained within controllers.
The solution is to "get the directive and controller to talk". Your example should be:
The controller:
function ListCtrl($scope) {
var count = 1;
$scope.list = [
"one",
"two"
];
$scope.add = function() {
$scope.list.push("new item " + count);
$scope.$broadcast("newItemAdded");
count++;
};
}
The directive:
function ListDirective($timeout) {
return {
link: function(scope, element, attr) {
scope.$on("newItemAdded", function() {
$timeout(function() {
var elements = element.find("li");
elements[elements.length - 1].focus();
});
});
}
};
}
JsFiddle: http://jsfiddle.net/kxUR9/8/