title: angular ng-messages only showing when $touched is true
body: <p>I am not doing anything too special.</p>
  
  <p>I have an input I want validated with every key stroke. If validation fails, display the error. Do not wait for the blur event to trigger the $touched.</p>
  
  <p>I thought this was the default case, but apparently it is not. I am using angular materials along with angular messages. I am doing this for capslock detection.</p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;form name="primaryLogin" novalidate&gt;
      &lt;md-content layout-padding layout="column"&gt;
          &lt;md-input-container flex&gt;
              &lt;label&gt;Login ID&lt;/label&gt;
              &lt;input type="text" required="" name="login" ng-model="primary.loginID" capslock&gt;
  
              &lt;div ng-messages="primaryLogin.$error"&gt;
                  &lt;div ng-message="required"&gt;
                      Please enter a Login ID.
                  &lt;/div&gt;
  
                  &lt;div ng-message="capslock"&gt;
                      Caps Lock is ON!
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;pre&gt;{{ primaryLogin | json }}&lt;/pre&gt;
  
          &lt;/md-input-container&gt;
  
      &lt;/md-content&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I first come to the page, turn caps lock on, and start typing, my error message looks like so:</p>
  
  <pre><code>{
    "$error": {
      "capslock": [
        {
          "$viewValue": "Q",
          "$validators": {},
          "$asyncValidators": {},
          "$parsers": [
            null
          ],
          "$formatters": [
            null,
            null
          ],
          "$viewChangeListeners": [],
          "$untouched": false,
          "$touched": true,
          "$pristine": false,
          "$dirty": true,
          "$valid": false,
          "$invalid": true,
          "$error": {
            "capslock": true
          },
          "$name": "login",
          "$options": {
            "debounce": 100,
            "updateOnDefault": true
          }
        }
      ]
    },
    "$name": "primaryLogin",
    "$dirty": true,
    "$pristine": false,
    "$valid": false,
    "$invalid": true,
    "$submitted": false,
    "login": {
      "$viewValue": "Q",
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [
        null
      ],
      "$formatters": [
        null,
        null
      ],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": false,
      "$dirty": true,
      "$valid": false,
      "$invalid": true,
      "$error": {
        "capslock": true
      },
      "$name": "login",
      "$options": {
        "debounce": 100,
        "updateOnDefault": true
      }
    }
  }
  </code></pre>
  
  <p>So this seems to be working as expected, but the actually error message doesn't display until the blur event fires on that particular input.. So I can go in with capslock, type 10 characters, the error object says the capslock error is there, but since $touched isn't true, then it doesn't show.</p>
  
  <p>Once $touched is set to true, then I can go back into the input and everything works like expected.</p>
  
  <p>Any ideas? Thanks in advance!</p>