Dynamically added directives call formatter instead of parser - angularjs

Question

I have an usecase where I need to dynamically add directives to an input field, depending on the configuration set in a DB.
It all seemed to work fine, but there were some strange quirks with these input fields.
I discovered that the strange behaviour is caused by the directives calling the formatters when I expect them to call the parsers.
I made a plunker to demonstrate this behaviour.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.test1 = 'World1';
$scope.test2 = 'World2';
});
app.directive('test', ['$log', function($log) {
return {
require : 'ngModel',
link : function(scope, elm, attrs, ctrl) {
function parse(viewValue) {
console.log('parsing', viewValue);
return viewValue;
}
function format(viewValue) {
console.log('formatting', viewValue);
return viewValue;
}
ctrl.$formatters.unshift(format);
ctrl.$parsers.unshift(parse);
}
};
}]);
app.directive('variabele', ['$compile', function($compile) {
return {
restrict : 'E',
template : '<div><input ng-model="ngModel" /></div>',
scope : {
ngModel : '='
},
require: ['ngModel'],
link: function(scope, elm, attrs, ctrl) {
console.log('testing');
var input = angular.element(elm.find("input"));
input.attr('test', '');
$compile(input)(scope);
}
};
}]);
plunker
It's a bit simplified from what I have to illustrate the problem. There are two input fields. One of which always has the test directive. The other has the variable directive which in turn adds the test directive dynamically.
In reality one or more directives are added which are defined in the database.
When you change the value of the first input field you can see in tghe console that the parser is called, but when you change the value of the second input field you see that the formatter is being called instead. I'm not sure what I'm doing wrong here.
EDIT: The original plunker was broken, so i fixed it. They now use a different model for each input field and the second input field correctly uses the variabele directive.

Answer 1

It is the expected behaviour,
Formatters change how model values will appear in the view.
Parsers change how view values will be saved in the model.
In your case, you bind the same value in both directive test and variabele. when you change value in test directive parsers are called ( view -> model) and in variabele it is the other way (model -> view) formatters are called.
for more info: How to do two-way filtering in angular.js?