title: Form validation not working in angular js
body: <p>I have the following: </p>
  
  <pre><code>&lt;form name="ctrl.form" class="form-horizontal" ng-class="{true: 'has-error'}[submitted &amp;&amp; form.email.$invalid]"
        novalidate&gt;
  
      &lt;div class="form-group" ng-class="{'has-error' : ctrl.form.inputName.$dirty &amp;&amp; ctrl.form.inputName.$invalid}"&gt;
          &lt;label for="inputName" class="col-sm-2 control-label"&gt;Name&lt;/label&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;input type="text" class="form-control" id="inputName" name="inputName" ng-model="ctrl.app.name"
                     placeholder="Enter stack name" ng-disabled="ctrl.editMode" ng-required='true'
                     ng-minlength='3' ng-maxlength='32' required/&gt;
          &lt;/div&gt;
          &lt;span ng-show="ctrl.form.inputName.$error.required &amp;&amp; !ctrl.form.inputName.$pristine" class="help-block"&gt;Name is required&lt;/span&gt;
          &lt;span ng-show="ctrl.form.inputName.$error.minlength" class="help-block"&gt;Name is too short&lt;/span&gt;
          &lt;span ng-show="ctrl.form.inputName.$error.maxlength" class="help-block"&gt;Name is too long&lt;/span&gt;
          &lt;span ng-show="ctrl.form.inputName.$error.pattern" class="help-block"&gt;Name has invalid characters&lt;/span&gt;
      &lt;/div&gt;
  
  
      &lt;div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}"&gt;
          &lt;div class="col-sm-offset-2 col-sm-10"&gt;
              &lt;button type="submit" class="btn btn-primary" ng-disabled="ctrl.isCreating"
                      ng-click="ctrl.SubmitForm()"&gt;{{ctrl.editMode ? 'Update' :
                  ctrl.isCreating? 'Creating': 'Create'}}
              &lt;/button&gt;
              &lt;span ng-show="ctrl.hasServerErrors" class="help-block"
                    ng-repeat="serverError in ctrl.serverErrors"&gt;
              {{serverError}}
          &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="alert alert-success" ng-show="ctrl.showUpdateSuccessAlert"&gt;
          &lt;strong&gt;Successfully updated!&lt;/strong&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now, the problem is, even though I have added the <code>required tag</code> to name, still when I click the submit button, the call goes to the backend service without showing that name is mandatory and has to be supplied. </p>
  
  <p>What am I missing in this? Thanks! </p>