title: AngularJS directive for dom-manipulating based on form validation
body: <p>I'm using the AngularJS validation feature, like this:</p>
  
  <pre><code>&lt;input type="text" class="form-control" ng-required="true" name="application_name" id="application_name" ng-model="jobApplication.description" required&gt;
  </code></pre>
  
  <p>If input field is empty AngluarJS assigns the <code>ng-invalid</code> css class to the input field. Unfortunately the theme I use needs the css-class on the parent / surrounding div:</p>
  
  <pre><code>&lt;div class="form-group form-md-line-input " ng-class="!new_application_form.application_name.$valid &amp;&amp; new_application_form.application_name.$touched ? 'has-error' : ''"&gt;
      &lt;div class="input-group right-addon"&gt;
          &lt;input type="text" class="form-control" ng-required="true" name="application_name" id="application_name" ng-model="jobApplication.description" required&gt;
          &lt;label for="application_name"&gt;Stellenbezeichnung: {{ jobApplication.description }}&lt;/label&gt; 
          &lt;span class="help-block"&gt;Help text&lt;/span&gt;
          &lt;span class="input-group-addon"&gt;
              &lt;i ng-show="new_application_form.application_name.$valid" class="fa fa-warning tooltips" data-original-title="help text" aria-describedby="tooltip122640"&gt;&lt;/i&gt;
          &lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I did it with a workaround (like <a href="https://stackoverflow.com/questions/23289864/advanced-manipulating-dom-in-angularjs-directive" title="this post">this post</a> suggests). It works but it really doesn't feel like "the angular way". It's redundant code and I thought about using a directive. Something like "take all divs with css class "form-md-line-input", look for an input field and apply the css class if related model / form is invalid. Is this possible?</p>