title: AngularJS Validation
body: <p>Hi I want to create a custom directive to do form validation.  I have a form with checkboxes and some text fields.  I want to make sure the user doesn't leave any of the fields empty.</p>
  
  <p>When the user leaves a form empty after pressing submit, I want the directive to highlight the border of the field red. My problem is that when I make an isolate scope directive it doesn't work.  When it isn't an isolate scope, all the fields turn red when only one is empty.  How can I fix this?</p>
  
  <p>directive.js:</p>
  
  <pre><code>   directive('createprofileformerrormsg', function() {
       return {
                scope:{createprofileformerrormsg:'@'},
      restrict: 'A',
                 require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
  
          scope.$watch('formErrors', function() {
  
              if (attr.createprofileformerrormsg == 1) {
  
                  elem.css("border", "red solid 1px");
              }
          });
  
      }
  
  
  }
  });
  </code></pre>
  
  <p>form.html</p>
  
  <pre><code> &lt;form data-ng-submit="createProfile()"&gt;
    Ethnicity:  &lt;select createprofileformerrormsg="{{formErrors.ethnicity}}" data-ng-   
  
   model="ethnicity"  &gt;
      &lt;option value="Asian"&gt;Asian&lt;/option&gt;
      &lt;option value="Black"&gt;Black&lt;/option&gt;
      &lt;option value="Caucasian"&gt;Caucasian&lt;/option&gt;
      &lt;option value="Hispanic"&gt;Hispanic&lt;/option&gt;
      &lt;option value="Middle Eastern"&gt;Middle Eastern&lt;/option&gt;
      &lt;option value="Native American"&gt;Native American&lt;/option&gt;
      &lt;option value="Other ethnicities"&gt;Other ethnicities&lt;/option&gt;
  
  &lt;/select&gt;&lt;br/&gt;
  Gender:  &lt;select createprofileformerrormsg="formErrors.ethnicity" data-ng-
  
  model="gender"&gt;
      &lt;option value="Male"&gt;Male&lt;/option&gt;
      &lt;option value="Female"&gt;Female&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Controller.js</p>
  
  <pre><code>  $scope.createProfile = function() {
   if ($scope.ethnicity == null) {
          $scope.formErrors.ethnicity = 1;
          error_count++;
      }
    if ($scope.gender == null) {
          $scope.formErrors.ethnicity = 1;
          error_count++;
      }
  }
  </code></pre>