AngularJS 1.3 directive to automatically handle validation messages with Bootstrap

example.html

<form name="loginForm" no-validate ng-submit="loginForm.$valid && login()">
      <form-group>
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required>
      </form-group>
      <form-group>
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required>
      </form-group>
      <button type="submit">Login</button>
</form>

form-group.directive.js

function formGroup ($compile) {
  return {
    restrict: 'E',
    require: '^form',
    transclude: true,
    replace: true,
    template: '<div class="form-group" ng-transclude></div>',
    link: function (scope, iElement, iAttrs, formCtrl) {
      // Apply styles
      iElement.querySelectorAll('label').addClass('control-label');
      iElement.querySelectorAll('input, select, textarea').addClass('form-control');
      // Handle errors if needed
      var inputName = iElement.querySelectorAll('[name]').attr('name');
      if (inputName !== undefined) {
        var ngMessages = $compile('<div ng-if="'+formCtrl.$name+'.$submitted" ng-messages="'+formCtrl.$name+'.'+inputName+'.$error" ng-messages-include="validation-messages.html"></div>')(scope);
        iElement.append(ngMessages);
        scope.$watch(function() {
          return formCtrl.$submitted && formCtrl[inputName].$invalid;
        }, function (invalid) {
          iElement.toggleClass('has-error', invalid);
        });
      }
    }
  };
};

validation-messages.html

<div class="help-block" ng-message="required">This field is required</div>
<div class="help-block" ng-message="date">The date format is invalid</div>