Angular ng-valid-email "blocked" with intervening custom directive - angularjs

Question

I am implementing a custom directive in Angular 1.4 which creates a inner input element within a form. I am having problems with the validation.
1) When make the email invalid (add a '.' to the end of the string in the input box), the ng-invalid-email class does not get propagated upwards to the form (possibly because the vc-input directive is in the way?). So it is reporting it as "required invalid" as opposed to "email invalid".
2) If I change vc-input to just input (and remove closing vc-input element), it works as expected (try in snippet).
Is there some way I can make sure this validity passes through the way it's supposed to?
'use strict';
var myApp = angular.module('myApp', []);
myApp
.directive('vcInput', ['$compile',
function ($compile) {
return {
restrict: 'E',
link: function ($scope, elem, attrs) {
var toDash = function(str){
return str.replace(/([A-Z])/g, function($1){return '-'+$1.toLowerCase();});
};
// returned glyph string could be glyphicon or fontawesome
var mapIcon = function(iconName) {
var glyphName = '';
if (iconName === 'search') {
glyphName = 'glyphicon glyphicon-search';
}
else if (iconName === 'user') {
glyphName = 'glyphicon glyphicon-user';
}
else if (iconName === 'password') {
glyphName = 'glyphicon glyphicon-lock';
}
else if (iconName === 'token') {
glyphName = 'glyphicon glyphicon-tags';
glyphName = 'fa fa-tags';
}
return glyphName;
};
var leadIcon = elem.attr('lead-icon');
elem.removeAttr('lead-icon');
var leadClass;
var spanClass = '';
if (leadIcon !== undefined) {
leadClass = mapIcon(leadIcon);
if (leadClass) {
spanClass = 'left-inner-addon';
}
else {
spanClass = 'left-inner-no-icon';
}
}
var icon = '';
if (leadClass !== undefined) {
icon = '<i class="' + leadClass + '"></i>';
}
var elementData = elem[0].outerHTML;
var startIndex = elementData.indexOf('<vc-input') + 9;
var stopIndex = elementData.indexOf('>') ;
var allAtt = elementData.substring(startIndex, stopIndex);
angular.forEach(attrs, function(value, key) {
if (key.lastIndexOf('$',0) && key !== 'leadIcon') {
elem.removeAttr(toDash(key));
}
});
var span1 = '<span class="' + spanClass + '">';
var span2 = '</span>';
var html = $compile(span1 + icon + '<input ' + allAtt + '/>' + span2)($scope);
elem.html(html);
}
};
}])
;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="myForm">
<label>Email:
<vc-input type="email" name="input" ng-model="email.text" ng-init="email.text='joe#aol.com'" required></vc-input>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span>
</div>
<samp>text = {{email.text}}</samp><br/>
<samp>myForm.input.$valid = {{myForm.input.$valid}}</samp><br/>
<samp>myForm.input.$error = {{myForm.input.$error}}</samp><br/>
<samp>myForm.$valid = {{myForm.$valid}}</samp><br/>
<samp>myForm.$error.required = {{!!myForm.$error.required}}</samp><br/>
<samp>myForm.$error.email = {{!!myForm.$error.email}}</samp><br/>
</form>
</div>