PhoneGap Unable to Configure Back Button for other HTML Page

By Default when creating a PhoneGap Project, there will be a index.js connected with the index.html (Default Initial Page). In the index.js I could configure its Back Button to perform certain action.

However, when I try to create a custom Javascript file to configure the Back Button in another HTML Page, the configuration for the Back Button is not working. Even the login.js have already defined do nothing on Back button press, but it will still go to the previous page when the Back button is pressed (on PhoneGap Android Mobile Apps).

My Problems:

I would like to configure the back button of my another HTML page (login.html) with Code below, but it failed, What are the mistakes that cause the back button could not be configure?

p.s. The login.js code is 100% same as the index.js, but index.js is working while login.js could not work.

login.html

<!DOCTYPE html>

<html ng-app='loginPage'>

<head>

  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

    <script src="../js/Bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/Bootstrap/bootstrap.min.css">

    <script src="../js/Angular/angular.min.js"></script>

    <script type="text/javascript" src="../control/login.js"></script>

    <title>Login Page</title>
</head>


<body class="container">

  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="../js/login.js"></script>
  <script type="text/javascript">
      app.initialize();
  </script>

</body>


</html>

../js/login.js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();

    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

        document.addEventListener('backbutton', function (evt) {
          alert("no");

        }, false);


    },
    // deviceready Event Handler

    onDeviceReady: function() {
        app.receivedEvent('deviceready');

    }

};