title: Syntax error : ng-messages='{{field}}.$error'
body: <p>I am getting the following error</p>
  
  <p>Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error].</p>
  
  <p>when I try to run the following code (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;
  ***PROBLEM CODE LINE BELOW***
      &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>This is the code to replace the directive  in the following code:</p>
  
  <pre><code>&lt;form-field record='contact' field='firstName' live='false' required='true'&gt;&lt;/form-field&gt;
  </code></pre>
  
  <p>The problem is obviously Angular does not like the <code>ng-messages={{field}}.$error</code> and I can get rid of the error by changing it to</p>
  
  <pre><code>ng-messages='field.$error'
  </code></pre>
  
  <p>but then the error message in the next paragraph does not get displayed.
  This code is from the TutsPlus Building a Web App from scratch with Angularjs which was released September 2014.</p>