Attempt to integrate bootstrap form messages with an angularjs directive. Need to move on, will revisit after clearing some fat from my plate!

showsValidation.js

// DAMN: THIS NO WORK because it watches the model, some how this also needs to tied
// into form submit for the cases where the model value was left blank
// for now, use this: ng-class || ng-show ="{ error: inviteForm.email.$invalid && inviteForm.email.$dirty }"
// Will toggle the css error class on the .control-group container and create/remove
// the error message.  Also assumes data is not invalid in a pristine state
// depends on bootstrap form layout and jQuery; TODO: make work without jQuery
angular.module('blitUi', []).directive('showsValidation', function() {
  return {
    restrict: 'A',
    link:function (scope, element, attrs) {
      var validator = scope[element[0].form.name][element[0].name], elementGroup, elementErrMsg;
      function remove() {
        if (elementErrMsg) { elementErrMsg.remove(); elementErrMsg = null; }
        if (elementGroup) elementGroup.toggleClass('error',false);
      }
      function add(msg) {
        if (!elementErrMsg) {
          if (!elementGroup) elementGroup = element.closest('.control-group');
          elementErrMsg = angular.element('<span class="help-inline">'+msg+'</span>');
          element.after(elementErrMsg);
        } else {
          elementErrMsg.text(msg);
        }
        elementGroup.toggleClass('error',true);
      }
      scope.$watch(attrs.ngModel, function() {
        if (validator.$pristine === true || validator.$invalid === false) return(remove());
        if (validator.$error) {
          if (validator.$error.required === true) return(add('required'));
        }
        console.log(validator);
      });
    }
  };
});