title: Custom directives is not working in Angular js
body: <p>While running the following code it should be focused(like cursor on button) on the button named focussed shown here. But its not working </p>
  
  <p><img src="https://i.stack.imgur.com/PdBFi.png" alt="enter image description here"></p>
  
  <p>Html code : </p>
  
  <pre><code>&lt;body ng-controller="TextController"&gt;
   &lt;button ng-click="clickUnfocused()"&gt;Not focussed&lt;/button&gt;
   &lt;button ngbk-focus ng-click="clickfocused()"&gt;focussed&lt;/button&gt;
   &lt;div&gt;{{message.text}}&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript code :</p>
  
  <pre><code>var kitkatmodule = angular.module('Kitkat', ['directives']);
  
      kitkatmodule.controller('TextController',function($scope) {
  
           $scope.message = {text:"nothin clicked"};
  
           $scope.clickUnfocused = function() {
           $scope.message.text = "Click Unfocused";
           }
           $scope.clickfocused = function() {
           $scope.message.text = "clickfocused";
           }
      });
  
      kitkatmodule.directive('ngbkFocus', function(){
          return  {
              link : function(scope, element, attrs, controller) {
                  element[0].focus();
              }
          };
      });
  </code></pre>
  
  <p>How to fix this</p>