Passing value to directive in directive ng-show

Question

Im trying to extend the angular input directive with an error box appended after that is automatically shown when the input has errors.

<form name="form">
   <input with-error show-error-if="form.input.$error.required" name="input" required/>
   <!-- error directive should be appended here and only shown when errors -->
</form>
<!-- working directive -->
<error field-name="input" show-if="form.input.$error.required"></error>

So the directive is specified as follows:

app.directive("withError", [
  '$compile', function($compile) {
     return {
        restrict: "A",
        replace: true,
        scope: {
           showErrorIf: "@"
        },
        link: function(scope, element, attrs) {
           if (element.next().length) {
               element.next().insertBefore(element);
           }
           var newElHtml = '<error field-name="' + attrs.name + '" show-if="{{ showErrorIf }}"></error>';
           var newEl = angular.element(newElHtml);
           newEl.insertAfter(element);
           $compile(newEl)(scope);
        }
      }
   }
]);

And the error directive specified:

app.directive("error", [
  function() {
     var errorTemplate;
     errorTemplate = '<div class="error" ng-show="$parent.{{ showIf }}">{{ errors[fieldName] }}</div>';
     return {
        restrict: "E",
        replace: true,
        scope: {
           fieldName: "@",
           showIf: "@"
        },
        template: errorTemplate,
        controller: function($scope, errorTexts) {
           $scope.errors = errorTexts;
        }
      }
    }
 ]);

The problem is that the appended directive does not hide or show depending on if there are errors while the manually added one does?

Fiddle