How to get ng-class with $dirty working in a directive?

Question

I have the following html which works and changes the class of the div when the input is changed using the $dirty:

Answer 1

Here is a plunker: http://plnkr.co/edit/3AFOHZFgExZKHjnd3gb0?p=preview

When you replace an element inside the compile function you should:

• Manually compile & link the new template.
• Terminate all directives on the same element.
• Check this answer: creating a new directive with angularjs

Directive:

app.directive('smartInputElement', function($compile) {
  return {
    restrict: 'E',
    priority: 1001,
    terminal: true,
    compile: function(tElm, attrs) {
      var template = angular.element(
        '
' +
        '' + attrs.label + '' +
        '' +
        '
');

      tElm.replaceWith(template);
      var fn = $compile(template);
      return function(scope) {
        fn(scope);
      };

    }
  };
});