AngularJS click event not working with onsen ui button

Sorry for my ignorance but I'm a newbie here,

The ng-click event on an ons-button is not firing,

I tried different solutions but no one does work for me

I'm a trying to create a simple page with just one tab that shows a button , for now , I'm just trying to make it trigger the expected event (an alert for exemple). Once resolved, I can go to implement a more advanced action ...

could it be a problem with the scopes ?

<html lang="en" ng-app="my-app">
  <head>
   <!-- here i added the needed css and js scripts -->
    <script>
      var module = angular.module("my-app", ["onsen"]);
      module.controller("TabbarController", function($scope) {
        $scope.updateTitle = function($event) {
          $scope.title = angular.element($event.tabItem).attr("label");
        };
      });

      module.controller("ListenButtonController", function($scope) {
        $scope.onListenButtonClick = function() {
          alert("lool");
        };

      });
    </script>
  </head>

  <body>
    <ons-page ng-controller="TabbarController">
      <ons-toolbar>
        <div class="center">{{ title }}</div>
      </ons-toolbar>

      <ons-tabbar swipeable position="auto" ons-prechange="updateTitle($event)">
        <ons-tab
          page="homeTemplate"
          label="Home"
          icon="ion-home, material:md-home"
          active
        >
        </ons-tab>
      </ons-tabbar>
    </ons-page>

    <template id="homeTemplate">
      <ons-page id="Tab1" ng-controller="ListenButtonController">
        <p style="text-align: center;">
          Welcome Home ^_^
        </p>
        <ons-button modifier="large" ng-click="onListenButtonClick()"
          >Click to Listen (not implemented yet), it just shows an alert!!</ons-button>
      </ons-page>
    </template>
  </body>
</html>

Solution

I can't see any problem with your code and it seems to work just fine. Below is an example snippet demonstrating that click event is triggered as it should. The only difference between your code and this snippet is that I have connected the libraries that are necessary to run it. No changes to controller/template have been made.

Make sure that you are running the latest version of your page in your browser.

<html lang="en" ng-app="my-app">
  <head>
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/angularjs-onsenui.min.js"></script>
    
    <script>
      var module = angular.module("my-app", ["onsen"]);
      module.controller("TabbarController", function($scope) {
        $scope.updateTitle = function($event) {
          $scope.title = angular.element($event.tabItem).attr("label");
        };
      });

      module.controller("ListenButtonController", function($scope) {
        $scope.onListenButtonClick = function() {
          alert("lool");
        };

      });
    </script>
  </head>

  <body>
    <ons-page ng-controller="TabbarController">
      <ons-toolbar>
        <div class="center">{{ title }}</div>
      </ons-toolbar>

      <ons-tabbar swipeable position="auto" ons-prechange="updateTitle($event)">
        <ons-tab
          page="homeTemplate"
          label="Home"
          icon="ion-home, material:md-home"
          active
        >
        </ons-tab>
      </ons-tabbar>
    </ons-page>

    <template id="homeTemplate">
      <ons-page id="Tab1" ng-controller="ListenButtonController">
        <p style="text-align: center;">
          Welcome Home ^_^
        </p>
        <ons-button modifier="large" ng-click="onListenButtonClick()"
          >Click to Listen (not implemented yet), it just shows an alert!!</ons-button>
      </ons-page>
    </template>
  </body>
</html>