diff --git a/extensions/mistral/templates/mistral/create.html b/extensions/mistral/templates/mistral/create.html
index 69a671e..bd16db3 100644
--- a/extensions/mistral/templates/mistral/create.html
+++ b/extensions/mistral/templates/mistral/create.html
@@ -51,14 +51,14 @@
               <div ng-repeat="(label, field) in row track by field.uid()">
                 <div ng-if="field.isAtomic()" class="col-xs-6">
                   <labeled label="label" for="{$ field.uid() $}">
-                    <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+                    <typed-field value="field"></typed-field>
                   </labeled>
                 </div>
                 <div ng-if="!field.isAtomic()" class="col-xs-12">
                   <collapsible-group content="field" title="label"
                                      additive="{$ field.isAdditive() $}" on-add="field.add()">
                     <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
-                      <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+                      <typed-field value="field"></typed-field>
                     </div>
                   </collapsible-group>
                 </div>
diff --git a/merlin/static/merlin/js/merlin.directives.js b/merlin/static/merlin/js/merlin.directives.js
index 57030b8..2b959c1 100644
--- a/merlin/static/merlin/js/merlin.directives.js
+++ b/merlin/static/merlin/js/merlin.directives.js
@@ -221,11 +221,11 @@
     return {
       restrict: 'E',
       scope: {
-        value: '=',
-        type: '@'
+        value: '='
       },
       link: function(scope, element) {
-        templates.templateReady(scope.type).then(function(template) {
+        var type = scope.value.getType();
+        templates.templateReady(type).then(function(template) {
           element.append($compile(template)(scope));
         });
       }
diff --git a/merlin/static/merlin/templates/fields/dictionary.html b/merlin/static/merlin/templates/fields/dictionary.html
index 858d4dc..ed2fdd3 100644
--- a/merlin/static/merlin/templates/fields/dictionary.html
+++ b/merlin/static/merlin/templates/fields/dictionary.html
@@ -3,7 +3,7 @@
     <div ng-repeat="(key, field) in value | extractFields track by field.uid()">
       <labeled ng-if="field.isAtomic()" label="field.keyValue" for="{$ field.uid() $}">
         <div class="input-group">
-          <typed-field id="{$ field.uid() $}" value="field" type="{$ field.getType() $}"></typed-field>
+          <typed-field id="{$ field.uid() $}" value="field"></typed-field>
         <span class="input-group-btn">
           <button class="btn btn-default" ng-click="value.removeItem(field.keyValue())">
             <i class="fa fa-minus-circle"></i>
@@ -15,10 +15,9 @@
         <collapsible-group ng-if="!field.inline" class="col-xs-12" title="field.keyValue"
                            on-remove="value.removeItem(field.keyValue())"
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
-          <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+          <typed-field value="field"></typed-field>
         </collapsible-group>
-        <typed-field ng-if="field.inline"
-                     value="field" type="{$ field.getType() $}"></typed-field>
+        <typed-field ng-if="field.inline" value="field"></typed-field>
       </div>
     </div>
   </div>
diff --git a/merlin/static/merlin/templates/fields/frozendict.html b/merlin/static/merlin/templates/fields/frozendict.html
index f4c5264..84d0e7c 100644
--- a/merlin/static/merlin/templates/fields/frozendict.html
+++ b/merlin/static/merlin/templates/fields/frozendict.html
@@ -3,19 +3,19 @@
     <div ng-repeat="(key, field) in row track by field.uid()">
       <div ng-if="field.isAtomic()" class="col-xs-6">
         <labeled label="key" for="{$ field.uid() $}">
-          <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+          <typed-field value="field"></typed-field>
         </labeled>
       </div>
       <div ng-if="!field.isAtomic()">
         <collapsible-group ng-if="!field.inline" class="col-xs-12" title="key"
                            additive="{$ field.isAdditive() $}" on-add="field.add()">
           <div ng-class="field.isPlainStructure() ? 'col-xs-6' : 'col-xs-12'">
-            <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+            <typed-field value="field"></typed-field>
           </div>
         </collapsible-group>
         <labeled ng-if="field.inline" class="col-xs-6"
                  label="key" for="{$ field.uid() $}">
-          <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+          <typed-field value="field"></typed-field>
         </labeled>
       </div>
     </div>
diff --git a/merlin/static/merlin/templates/fields/list.html b/merlin/static/merlin/templates/fields/list.html
index 379c264..e5d58cf 100644
--- a/merlin/static/merlin/templates/fields/list.html
+++ b/merlin/static/merlin/templates/fields/list.html
@@ -3,7 +3,7 @@
     <div ng-repeat="(index, field) in value | extractFields track by field.uid()">
       <div ng-if="field.isAtomic()" class="form-group">
         <div class="input-group">
-          <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+          <typed-field value="field"></typed-field>
         <span class="input-group-btn">
           <button class="btn btn-default" ng-click="value.remove($index)">
             <i class="fa fa-minus-circle"></i>
@@ -12,7 +12,7 @@
         </div>
       </div>
       <div ng-if="!field.isAtomic()">
-        <typed-field value="field" type="{$ field.getType() $}"></typed-field>
+        <typed-field value="field"></typed-field>
       </div>
     </div>
   </div>
diff --git a/merlin/test/js/merlin.directives.spec.js b/merlin/test/js/merlin.directives.spec.js
index 00cf1b9..f6133fa 100644
--- a/merlin/test/js/merlin.directives.spec.js
+++ b/merlin/test/js/merlin.directives.spec.js
@@ -232,12 +232,12 @@ describe('merlin directives', function() {
         '<div><typed-field ' + contents + '></typed-field></div>')($scope);
     }
 
-    it('type of resulting field is determined by `type` attribute', function() {
+    it('type of resulting field is determined by `value.getType` method', function() {
       var element1, element2;
-      $scope.value1 = {type: 'text'};
-      $scope.value2 = {type: 'number'};
-      element1 = makeFieldElem('value="value1" type="{$ value1.type $}"');
-      element2 = makeFieldElem('value="value2" type="{$ value2.type $}"');
+      $scope.value1 = {getType: function() { return 'text'; }};
+      $scope.value2 = {getType: function() { return 'number'; }};
+      element1 = makeFieldElem('value="value1"');
+      element2 = makeFieldElem('value="value2"');
       $httpBackend.flush();
       $scope.$digest();
 
@@ -247,8 +247,8 @@ describe('merlin directives', function() {
 
     it('field is not rendered until the corresponding template has been served', function() {
       var element;
-      $scope.value = {type: 'text'};
-      element = makeFieldElem('value="value" type="{$ value.type $}"');
+      $scope.value = {getType: function() {return 'text'; }};
+      element = makeFieldElem('value="value"');
       expect(element.html()).not.toContain('<textarea');
 
       $httpBackend.flush();