title: Getting form values
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
      .controller('mainCtrl', ['$scope', function ($scope) {
  
          $scope.checkVal = function () {
              console.log('entered');
              console.log($scope.data.user)
          }
  
          $scope.data = {
              //to keep the data from the api or any static data
              //this will used to show the data in the view
              user: {
                  fname: '',
                  lname: '',
                  email: '',
                  password: ''
              }
  
          };
          $scope.methods = {
              //this will called from the views to interact with properties and data
              //use methods to change the values 
              checkVal: function () {
                  console.log('entered');
                  console.log($scope.data.user)
              },
          };
          $scope.properties = {
              //only to change views for ng-if and ng-show
          }
  
  }])</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div action="#" ng-controller="mainCtrl as ctrl"&gt;
          &lt;div id="modal-login" class="modal" tabindex="-1"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;form action="#home" ng-submit="ctrl.methods.checkVal()"&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input ng-model="ctrl.data.user.email" type="text" name="user-email" placeholder="Email:" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;input ng-model="ctrl.data.user.password" type="password" name="password" placeholder="Password:" required&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;div class="form-group clearfix"&gt;
  
                                  &lt;button type="submit" class="btn btn-primary"&gt;Login&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to insert the values from the form in the object that i created in the controller. But somehow it isn't doing that. I don't understand why the data binding of this form doesn't give the output in the console like i asked it to. What am i doing wrong?</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div action="#" ng-controller="mainCtrl as ctrl"&gt;
      &lt;div id="modal-login" class="modal" tabindex="-1"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;form action="#home" ng-submit="ctrl.methods.checkVal()"&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input ng-model="ctrl.data.user.email" type="text" name="user-email" placeholder="Email:" required&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;input ng-model="ctrl.data.user.password" type="password" name="password" placeholder="Password:" required&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;div class="form-group clearfix"&gt;
  
                              &lt;button type="submit" class="btn btn-primary"&gt;Login&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="app.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>js</strong></p>
  
  <pre><code>angular.module('app', [])
  .controller('mainCtrl', ['$scope', function ($scope) {
  
      $scope.checkVal = function () {
          console.log('entered');
          console.log($scope.data.user)
      }
  
      $scope.data = {
          //to keep the data from the api or any static data
          //this will used to show the data in the view
          user: {
              fname: '',
              lname: '',
              email: '',
              password: ''
          }
  
      };
      $scope.methods = {
          //this will called from the views to interact with properties and data
          //use methods to change the values 
          checkVal: function () {
              console.log('entered');
              console.log($scope.data.user)
          },
      };
      $scope.properties = {
          //only to change views for ng-if and ng-show
      }
  </code></pre>
  
  <p>}])</p>