title: angularjs form inside bootstrap modal popup
body: <p>I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.</p>
  
  <p><a href="https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview</a> </p>
  
  <p>My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.</p>
  
  <p>My form:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
                      &lt;form class="form-horizontal" name="contact" ng-submit="contactForm()"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-lg-3 control-label"&gt;Name* :&lt;/label&gt;
                              &lt;div class="col-lg-8"&gt;
                                  &lt;input class="form-control" type="text" id="name" name="_name" ng-model="_name" &gt; &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-lg-3 control-label"&gt;Email* :&lt;/label&gt;
                              &lt;div class="col-lg-8"&gt;
                                  &lt;input class="form-control" type="email" id="email" name="_email" ng-model="_email" required&gt; &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-lg-3 control-label"&gt;Mobile* :&lt;/label&gt;
                              &lt;div class="col-lg-8 row"&gt;
                                  &lt;div class="col-lg-4"&gt;
                                      &lt;input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"&gt; &lt;/div&gt;
                                  &lt;div class="col-lg-8"&gt;
                                      &lt;input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-lg-3 control-label"&gt;Message :&lt;/label&gt;
                              &lt;div class="col-lg-8"&gt;
                                  &lt;textarea class="form-control" rows="2" name="_condition" ng-model="_condition"&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="col-lg-offset-7 col-lg-5"&gt;
                          &lt;button type="submit" class="btn btn-primary" id="contactSubmit" &gt;Submit&lt;/button&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;/div&gt;&lt;/div&gt;    
                      &lt;/form&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.contactForm = function(){
  console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
  };
  </code></pre>