Button Click event in Angular JS

Question

I am trying to fire a button click event in angular Js but its not happening at all. Neither i am getting any kind of event related error in developer console of Chrome. Here is the Markup..

                    <!-- Login Form Here !-->

                    <div id="login" ng-controller="LoginformController" style="display: none;" class="col-sm-5 form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Login now</h3>
                                <p>Fill in the form below to get instant access:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <div class="form-top-divider"></div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="registration-form">
                                <div class="form-group">
                                    <label class="sr-only" for="UserID">User ID</label>
                                    <input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="Password">Password</label>
                                    <input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
                                </div>

                                <button type="submit" class="btn">Login!</button>
                                <br/>
                                <button type="button" class="btn-sm btn-link" ng-click="PasswordRecovery()">Forgot Password</button>

                            </form>
                        </div>
                    </div>

and here is the anguar JS code..

  var app = angular.module('LoginApp', []);
  app.controller('LoginformController', function ($scope) {
            $scope.PasswordRecovery = function () {
                alert("Clicked 2");

            }
        });

Please help me to resolve this ..

Answer 1

If I would add

<div ng-controller="UnexistingController"></div>

to your HTML then I would get:

"Error: [ng:areq] Argument 'UnexistingController' is not a function, got undefined http://errors.angularjs.org/1.4.3/ng/areq?p0=UnexistingController&p1=not%20a%20function%2C%20got%20undefined

Which makes sense, since I did not add a controller to the module yet. I suspect you made the same mistake.

Argument 'SignupformController' is not a f‌​unction, got undefined

Description

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and truthy

.

Answer 2

Works for me, I don't understand why you added style="display: none;, but it's not the problem.

See Plunker.