Angular: focus after click

http://angularjs.org/

by mrajcok

HTML

<div ng-controller="MainCtrl">
    <span ng-hide="editing">{{text}}</span>
    <input ng-show="editing" type="text" ng-model="text" value="{{text}}" focus="editing">
    <button ng-click="toggleEditing()">
      <span ng-hide="editing">Edit</span>
      <span ng-show="editing">Save</span>        
    </button>
</div>

JavaScript

var app = angular.module('angularjs-starter', []);

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

app.controller('MainCtrl', function($scope) {
    $scope.editing = false;
    $scope.text = 'Hello World';
    $scope.toggleEditing = function() {
        $scope.editing = !$scope.editing;
    };
});