title: Validating a form placed inside a Angularjs Bootstrap modal
body: <p>I using angularjs bootstrap modal, and i want to validate form before submit, so i use <code>required</code> in <code>input</code> tag like this:</p>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt;
  &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;Add&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form id="productForm" novalidate&gt;
              &lt;div&gt;
                  &lt;label for="ProductName"&gt; ProductName:&lt;/label&gt;
                  &lt;input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required /&gt;
  
              &lt;/div&gt;
              &lt;div style="margin:10px"&gt;
                  &lt;label for="Price"&gt;Price:&lt;/label&gt;
                  &lt;input type="text" name="Price" id="Price" ng-model="model.Price" required /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid"&gt;Save&lt;/button&gt;
          &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
       &lt;/div&gt;
     &lt;/script&gt;
    &lt;button type="button" class="btn btn-default modalBtn" ng-click="open()"&gt;addProduct&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it doesn't work, what is the problem?</p>