Angular: Empty Fiddle

http://angularjs.org/

by rahilwazir

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<div ng-controller="MyCtrl">
    <form name="testForm" novalidate>
        <div class="row">
            <div class="col-md-6" form-group="email">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="email" required  />
            </div>
        </div>    
    </form>
    <pre>testForm.email.$error: {{testForm.email.$error}}</pre>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('formGroup', ['$compile',
  function ($compile) {
      var linker = function (scope, element, attrs) {
          var fieldName = attrs.formGroup;
          var formName = attrs.form;

          if (formName === undefined || formName === null) {
              //find form name
              formName = $(element).closest('form').attr('name');

              if (formName === undefined || formName === null) {
                  console.error('Could not find form name for error ' + fieldName);
              }
          }

          var showErrorOn = formName + '.' + fieldName + '.$invalid';

          $(element).addClass('form-group');
          $(element).attr('ng-class', '{ \'has-error\' : ' + showErrorOn + ' }');
          $(element).removeAttr('form-group');
          $compile(element)(scope);
      }

      return {
          restrict: 'A',
          link: linker
      }
  }]);


myApp.controller('MyCtrl', ['$scope', function ($scope) {
    
}]);