title: Having a hard time debugging error - Token '{' invalid key at column 2
body: <p>I have encountered an error which I'm unable to debug.</p>
  
  <p>form-field.html</p>
  
  <pre><code>&lt;div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty &amp;&amp; {{field}}.$invalid }"&gt;
      &lt;label class='col-sm-2 control-label'&gt; {{ field | labelCase }} &lt;span ng-if='required'&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;div class='col-sm-6' ng-switch='required'&gt;
  
          &lt;input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' /&gt;
  
          &lt;div class='input-group' ng-switch-default&gt;
              &lt;input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' /&gt;
              &lt;span class='input-group-btn'&gt;
                  &lt;button class='btn btn-default' ng-click='remove(field)'&gt;&lt;span class='glyphicon glyphicon-remove-circle'&gt;&lt;/span&gt;&lt;/button&gt; 
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class='col-sm-4 has-error' ng-show='{{field}}.$dirty &amp;&amp; {{field}}.$invalid' ng-messages='{{field}}.$error'&gt;
          &lt;p class='control-label' ng-message='required'&gt; {{ field | labelCase }} is required. &lt;/p&gt;
          &lt;p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'&gt; {{ field | labelCase }} {{v[1]}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>new.html</p>
  
  <pre><code>&lt;h2&gt; New Contact &lt;/h2&gt;
  
  &lt;form name='newContact' novalidate class='form-horizontal'&gt;
      &lt;form-field record='contact' field='firstName' live='false' required='true'&gt;&lt;/form-field&gt;
  
  
  
   &lt;div class='row form-group'&gt;
          &lt;div class='col-sm-offset-2'&gt;
              &lt;button class='btn btn-primary' ng-click='save()'&gt; Create Contact &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm getting the following error:</p>
  
  <p>In the browser:</p>
  
  <blockquote>
    <p>Error: [$parse:syntax]
    <a href="http://errors.angularjs.org/1.4.1/" rel="noreferrer">http://errors.angularjs.org/1.4.1/</a>$parse/syntax?p0=%7B&amp;p1=invalid%20key&amp;p2=2&amp;p3=%7B%7Bfield%7D%7D.%24error&amp;p4=%7Bfield%7D%7D.%24error</p>
  </blockquote>
  
  <p>On angular site:</p>
  
  <blockquote>
    <p>Error: $parse:syntax Syntax Error Syntax Error: Token '{' invalid key
    at column 2 of the expression [{{field}}.$error] starting at
    [{field}}.$error].</p>
  </blockquote>
  
  <p>Does someone know why? Thanks!</p>