AngularJS: focus on button click

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="App">

<div ng-controller="Ctrl">
  <input type="email" id="email" class="form-control">
  <button event-focus="click" event-focus-id="email">Declarative Focus</button>
  <button ng-click="doSomething()">Imperative Focus</button>
</div>
</body>

</html>

// Code goes here

var App = angular.module('App', []);

// App.factory('focus', function($timeout, $window) {
//   return function(id) {
//     // timeout makes sure that it is invoked after any other event has been triggered.
//     // e.g. click events that need to run before the focus or
//     // inputs elements that are in a disabled state but are enabled when those events
//     // are triggered.
//     $timeout(function() {
//       var element = $window.document.getElementById(id);
//       if (element)
//         element.focus();
//     });
//   };
// });

// App.directive('eventFocus', function(focus) {

//   console.log("hello!");

//   return function(scope, elem, attr) {
//     elem.on(attr.eventFocus, function() {
//       focus(attr.eventFocusId);
//     });

//     // Removes bound events in the element itself
//     // when the scope is destroyed
//     scope.$on('$destroy', function() {
//       elem.off(attr.eventFocus);
//     });
//   };
// });


App.controller('Ctrl', function($scope, focus) {
  $scope.doSomething = function() {
    // do something awesome
    console.log("hey!");
    focus('email');
  };
});

/* Styles go here */