Validation messages are not getting displayed when trancluding a directive within another directive

Question

To reduce the boilerplate code for html validations i am writing two directives: one for templating and another for validations... both directives do work as expected and an

Answer 1

yes you are right, indeed the problem is with

element.replaceWith($compile(template)(scope));

you are putting the element on dom after compiling it, you are doing reverse and hence the ngmodel does not get a change to hookup itself to the parent form.

what you are doing is:

1. create & compile element
2. place it in dom

as element is already compiled before making it to the dom.. it would never know of its parent form and hence wont link itself to the parent.

the sequence of step should have been:

1. create an element, 
2. place it in dom 
3. compile it. // now it will have a chance to hook up to the parent

so what you should rather do is:

   var el =angular.element(template);
   element.replaceWith(el);
   $compile(el)(scope);

check the plunker link: http://plnkr.co/edit/hwyuuzeAnu5oBQqmmpR3?p=preview