angularjs - ngShow doesnt work when built inside directive -

i want add red star input in case invalid. wrote directive adds red star element near input elemnt. use ng-show star. thought show if input valid. problem is, red star shows, if input invalid.

<div ng-app="docu">     <form name="form">         <input name="inp" ng-error-show type="text" ng-model="x" ng-required="true">                </form> </div>   var docu = angular.module('docu', ["portaldirectives"]);  var portaldirectives = angular.module("portaldirectives", []);          portaldirectives.directive("ngerrorshow", function() {     return {         restrict: 'a',         link: function(scope, element, attrs, ctrl) {             var varname = "form.inp.$valid";             element.parent().prepend('<span style="color:red" ng-show="!' + varname + '" >*</span>');         }     }; }); 

http://plnkr.co/edit/7so4ney5kewltaanin49?p=preview

you must compile new prepended element:

portaldirectives.directive("ngerrorshow", function($compile) {     return {         restrict: 'a',         link: function(scope, element, attrs, ctrl) {             var varname = "form.inp.$valid";              var a_input = angular.element($compile('<span style="color:red" ng-show="!' + varname + '" >*</span>')(scope));              element.parent().prepend(a_input);         }     }; }); 

demo fixed plunker

---

also see $comile documentation