title: How to access a dom element in a Angular directive
body: <p>I am trying to attach a keyup event to a directive in my Angular project.  Here is the directive:</p>
  
  <pre><code>angular.module('clinicalApp').directive('chatContainer', function() {
    return {
      scope: {
        encounter: '=',
        count: '='
      }
      templateUrl: 'views/chat.container.html',
  
      link: function(scope, elem, attrs) {
        scope.count = 500;
      }
    };
  });
  </code></pre>
  
  <p>And here is the html from the template:</p>
  
  <pre><code>&lt;div class="span4 chat-container"&gt;
    &lt;div class="chat-body"&gt;
      &lt;form accept-charset="UTF-8" action="#" method="POST"&gt;
        &lt;div class="text-area-container"&gt;
          &lt;textarea id="chatBox" class="chat-box" rows="2"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="button-container btn-group btn-group-chat"&gt;
          &lt;input  id="comment" class="btn btn-primary btn-small btn-comment disabled"  value="Comment" ng-click="addMessage()"/&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to access the <code>chatbox</code> in my link function and attach the keyup event to it.  I know I can get it with jQuery, but that cannot be the Angular way.  What is the proper way to grab that element from the dom?</p>