Question

In this sample code http://plnkr.co/l6kv7x I want to move the focus into text input and select the content when the user clicks the edit button but I didn’t figure it out how to do it in AngularJS.

Answer 1

The question is very similar to AngularJS – Focusing an input element when a checkbox is clicked, so here is a very similar solution: a focus directive, that takes editing as an attribute:

app.directive('focus', function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.focus, function(newValue) {
            newValue && element[0].focus()
        })
    }
});

As @Josh already pointed out, we can use the native DOM focus() method, by accessing the raw DOM element using element[0] — element itself is a wrapped jqLite (or jQuery if loaded) element.

The HTML:

<input ng-show="editing" type="text" ng-model="text" value="{{text}}"
  focus="editing">

Fiddle.