javascript - Having a hard time debugging error - Token '{' invalid key at column 2 -

i have encountered error i'm unable debug.

form-field.html

<div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }">     <label class='col-sm-2 control-label'> {{ field | labelcase }} <span ng-if='required'>*</span></label>     <div class='col-sm-6' ng-switch='required'>          <input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurupdate()' />          <div class='input-group' ng-switch-default>             <input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurupdate()' />             <span class='input-group-btn'>                 <button class='btn btn-default' ng-click='remove(field)'><span class='glyphicon glyphicon-remove-circle'></span></button>              </span>         </div>     </div>      <div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'>         <p class='control-label' ng-message='required'> {{ field | labelcase }} required. </p>         <p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'> {{ field | labelcase }} {{v[1]}}</p>     </div> </div> 

new.html

<h2> new contact </h2>  <form name='newcontact' novalidate class='form-horizontal'>     <form-field record='contact' field='firstname' live='false' required='true'></form-field>     <div class='row form-group'>         <div class='col-sm-offset-2'>             <button class='btn btn-primary' ng-click='save()'> create contact </button>         </div>     </div> </form> 

i'm getting following error:

in browser:

error: [$parse:syntax] http://errors.angularjs.org/1.4.1/$parse/syntax?p0=%7b&p1=invalid%20key&p2=2&p3=%7b%7bfield%7d%7d.%24error&p4=%7bfield%7d%7d.%24error

on angular site:

error: $parse:syntax syntax error syntax error: token '{' invalid key @ column 2 of expression [{{field}}.$error] starting @ [{field}}.$error].

does know why? thanks!

i notice error happens when binding data attribute on custom directive. where

$scope.mydata.value = "hello!"; 

this causes error:

<my-custom-directive my-attr="{{mydata.value}}"></my-custom-directive> 

but works fine:

<my-custom-directive my-attr="mydata.value"></my-custom-directive>