title: Angular bind class of element to element focus
body: <p>In my following angular application, I have multiple rows of <code>myelement</code> (angular directive wrapper over <code>input</code> tag). At a time I need to focus/select/highlight one of it, <code>.selected</code> class in the styles does that.</p>
  
  <p>In following application, everything works fine except focus to the <code>input</code> tag, which needs to be bounded by the css class <code>selected</code>. I.E. whatever element has class <code>selected</code> the corresponding <code>input</code> tag should be focused . How can I acieve that ?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      .container {
        display: flex;
        flex-direction: column;
        width: 600px;
      }
      .notebook {
        display: flex;
        justify-content: center;
      }
      .cell {
        margin: 5px;
        padding: 5px;
      }
      .selected {
        border-style: solid;
        border-color: green;
        border-width: 1px;
        border-left-width: 5px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp"&gt;
  
  &lt;div ng-controller="ListController as listctrl" class="notebook"&gt;
  
    &lt;div class="container"&gt;
      &lt;myelement ng-repeat="i in listctrl.list"
          ng-click="listctrl.selected = $index"
          ng-class="{selected : listctrl.selected === $index}"
          class="cell"&gt;&lt;/myelement&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  angular
    .module('myApp',[])
    .controller('ListController', function($scope) {
      var listctrl = this;
      listctrl.list = [];
      listctrl.selected = 0;
  
      listctrl.addCell = function() {
        var x = listctrl.list.length;
        listctrl.list.push(x);
        listctrl.selected = listctrl.list.length - 1;
      }
  
      listctrl.addCell();
  
      $scope.$on('add', function (event, message) {
        $scope.$apply(listctrl.addCell);
      });
  
      $scope.$on('keyUp', function(event) {
        $scope.$apply(function(){
          listctrl.selected = listctrl.selected - 1;
        });
      });
  
      $scope.$on('keyDown', function(event) {
        $scope.$apply(function(){
          listctrl.selected = listctrl.selected + 1;
        });
      });
    })
    .directive('myelement', function($rootScope){
  
      return {
        template: '&lt;input style="width: 95%"&gt;&lt;/input&gt;',
        restrict: 'E',
        link: function (scope, element, attrs) {
  
          var inputTag = element[0].children[0];
          inputTag.focus();
  
          element.on('keydown', function(event) {
            if (event.keyCode === 13 &amp;&amp; event.shiftKey) {
              $rootScope.$broadcast('add');
            } else if (event.keyCode === 38) {
              $rootScope.$broadcast('keyUp');
            } else if (event.keyCode === 40) {
              $rootScope.$broadcast('keyDown');
            }
          });
        },
        controller: function ($scope) {
  
        }
      };
    })
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>