title: AngularJS on enter directive on form input no saving Model value
body: <p>I have the following on a page - full code in this <a href="http://plnkr.co/edit/NZMC0Km3pFUBGXgcVopx?p=preview" rel="nofollow">Plunker</a></p>
  
  <p>There is a custom <code>onEnter</code> directive that calls a function when enter is pressed on a chat form input. Code snippet below</p>
  
  <pre><code>//**HTML View**
  &lt;div ng-controller="mainCtrl"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="chat in chatMessages"&gt;
          {{chat.username}}&lt;br/&gt;
             {{chat.message}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;form id="chatForm" name="chatForm" ng-controller="formCtrl"&gt;
      &lt;label for="chat-username"&gt;User: &lt;/label&gt;
      &lt;input type="text" id="chat-username" class="chat__username" ng-model="chat.username" required&gt;
      &lt;label for="chat-input"&gt;Chat: &lt;/label&gt; 
      &lt;input type="text" id="chat-input" class="chat__input" on-enter="sendChat()" ng-model="chat.message" required&gt;
      &lt;a href="#" class="chat__submit icon-comments" id="chat-submit"  ng-click="sendChat()" ng-disabled="isChatValid()"&gt;Chatme&lt;/a&gt;
  &lt;/form&gt;
  
  
  //**Javascript**
  app.controller('formCtrl',function($scope,Chats){
    $scope.sendChat = function() {
      if($scope.isChatValid()) {
        return;
      }
      console.log(JSON.stringify($scope.chat));
      var msg = {};
      angular.copy($scope.chat,msg);
      Chats.data.push(msg);       
    };
  
    $scope.isChatValid = function() {
      return $scope.chatForm.$invalid;
    };
  });
  </code></pre>
  
  <p>Problem is the value of the input (<code>message</code>) is not saved into the scope model (<code>chat</code>). If I remove the <code>onenter</code> directive it works. What am I missing here? Any help will be great</p>