AngularJS - function not working on ng-click

Question

my scope function "login()" is not working when the user enter with the "ng-click" , why is not working? please help!

HTML

<a  id="login-button1" class="button button-assertive  button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>

Funcion on controller

.controller('loginCtrl', ['$scope', "Auth", '$state',
function ($scope, Auth, $stateParams) {

 $scope.login = function() {

    $signin_email = $scope.userloginForm.email.$modelValue;
    $signin_password = $scope.userloginForm.password.$modelValue;

     // sign in
      Auth.$signInWithEmailAndPassword($signin_email, $signin_password)
        .then(function(firebaseUser) {
          //$scope.message = "User created with uid: " + firebaseUser.uid;
          alert(firebaseUser.email + " logged in successfully!");
        }).catch(function(error) {

            alert(error.message);
          //$scope.error = error;
        });


    };



  }])

That is the form :

 <form id="login-form1" name="$parent.userloginForm" class="list" >
      <div class="spacer" style="height: 40px;"></div>
      <ion-list id="login-list1">
        <label class="item item-input" id="login-input1">
          <span class="input-label">Email :</span>
          <input type="text" name="email" ng-model="member.email" placeholder="">
        </label>
        <label class="item item-input" id="login-input2">
          <span class="input-label">Senha :</span>
          <input type="password" ng-model="member.password" placeholder="">
        </label>
      </ion-list>
      <div class="spacer" style="height: 40px;"></div>
      <a  id="login-button1" class="button button-assertive  button-block icon-right ion-log-in" ng-click="login()" >Entrar</a>
      <a href-inappbrowser="/signup" id="login-button2" class="button button-positive  button-block button-clear">Esqueceu sua senha?</a>
    </form>

Answer 1

Try to use $scope.member.email instead of $scope.userloginForm.email.$modelValue and $scope.member.password instead of $scope.userloginForm.password.$modelValue inside login function, cause into this properties Angular writes from form's inputs. Of course, an the top of your controller, you should have $scope.member = {} . Also, I think your form's name should be userloginForm , not $parent.userloginForm . And one more thing - if you don't have to, you should not use ng-click() to submit form, you should ng-submit="login" on your form and <button id="login-button1" class="button button-assertive button-block icon-right ion-log-in type="submit">Entrar</button>

Answer 2

Instead of using $scope.userloginForm.email.$modelValue you can directly pass ng-model object as a parameter in the login function.

In HTML :

<a id="login-button1" class="button button-assertive  button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a>

In controller :

$scope.login = function(member) {
  var signin_email = member.email;
  var signin_password = member.password;
  console.log(signin_email);
  console.log(signin_password);
}

DEMO

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', function($scope) { $scope.login = function(member) { var signin_email = member.email; var signin_password = member.password; console.log(signin_email); console.log(signin_password); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <form id="login-form1" name="userloginForm" class="list" > <div class="spacer" style="height: 40px;"></div> <ion-list id="login-list1"> <label class="item item-input" id="login-input1"> <span class="input-label">Email :</span> <input type="text" name="email" ng-model="member.email" placeholder=""> </label> <label class="item item-input" id="login-input2"> <span class="input-label">Senha :</span> <input type="password" ng-model="member.password" placeholder=""> </label> </ion-list> <div class="spacer" style="height: 40px;"></div> <a id="login-button1" class="button button-assertive button-block icon-right ion-log-in" ng-click="login(member)" >Entrar</a> <a href-inappbrowser="/signup" id="login-button2" class="button button-positive button-block button-clear">Esqueceu sua senha?</a> </form> </div>