title: How to observe custom events in AngularJS?
body: <p>Simple example: I have a textarea and want to provide additional behavior to it: do something on <code>enter</code> key and go to next line on <code>shift + enter</code></p>
  
  <p>I suppose that I should provide additional directive to add that behavior. And I've done this: <a href="http://jsbin.com/oruvuy/1/edit" rel="noreferrer">http://jsbin.com/oruvuy/1/edit</a></p>
  
  <p>P.S. One hackie thing seems strange for me: I invoke <code>$digest()</code> manually. Is it ok? Any thoughts? </p>
  
  <p>JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('Chat', [])
    .directive('enterSubmit', function () {
      return {
        restrict: 'A',
        link: function (scope, element, attrs) {
          var submit;
  
          $(element).on({
            keydown: function (e) {
              submit = false;
  
              if (e.which === 13 &amp;&amp; !e.shiftKey) {
                submit = true;
                e.preventDefault();
              }
            },
  
            keyup: function () {
              if (submit) {
                scope.$eval( attrs.enterSubmit );
  
                // flush model changes manually
                scope.$digest();
              }
            }
          });
        }
      };
    });
  
  function ChatCtrl($scope) {
    $scope.messages = [{
      text: 'Sample Message',
      datetime: new Date()
    }];
  
    $scope.add = function () {
      $scope.messages.push({
        text: $scope.message,
        datetime: new Date()
      });
      $scope.message = '';
    };
  
    $scope.message = '';
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body ng-controller="ChatCtrl"&gt;
  
    &lt;h1&gt;Leave message:&lt;/h1&gt;
    &lt;form&gt;
      &lt;div class='hint'&gt;Click &amp;lt;Enter&amp;gt; to submit :)&lt;/div&gt;
      &lt;textarea
        cols="30"
        rows="5"
        ng-model="message"
        enter-submit='add()'
      &gt;&lt;/textarea&gt;
      &lt;br /&gt;
      &lt;button type="submit" ng-click="add()"&gt;Send message!&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;h3&gt;Messages list:&lt;/h3&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Text&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="message in messages"&gt;
        &lt;td class='text'&gt;{{message.text}}&lt;/td&gt;
        &lt;td class='date'&gt;{{message.datetime | date:"HH:mm:ss"}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>But is it correct way to do that?</p>