Controller not being accessed despite being specified

I have a very simple app that has a splitter (onsenui) menu that opens different templates from index.html.

In index.js I declare a controller that should be bound to one of the template pages in index.html. I can follow with the debugger and watch the controller code be accessed during the first time the page is loaded, I assume it is being called on initial assignment, but afterwards the method advance() is never called when the button that should call it is pressed.

The method is assigned to the button using the ng-click directive.

Everything else works, it is only the controller and onclick that is not.

index.html :

<template id="traditionalrosary.html">
    <div>
        <ons-page id="traditionalrosary" ng-controller="traditionalRosaryController">
            <link rel="stylesheet" href="css/traditionalrosary.css">
            <body>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button onclick="fn.open()">
                            <ons-icon icon="md-menu"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">
                        Logo
                    </div>
                </ons-toolbar>
                <ons-card style="width:25vw; height 50vh; margin: auto;">
                    <img id="logoImage" class="img-responsive" src="img/logo.jpg" style='height=33vh; width=33vw; object-fit: cover; margin: auto;'>
                </ons-card>
                <ons-card style='left:50vh; width:75vw; height 50vh; margin: auto; object-fit: contain;'>
                    <textarea class="textarea" ng-model="textstuff" ng-init="textstuff = 'Hello now'" style="display: block; width: 100%; height 50vh; object-fit: contain; margin: auto; " value="OK" ' rows="10" placeholder="Textarea"> 
                    </textarea>
                </ons-card>
                <ons-button modifier="large" ng=click="advance()">advance</ons-button>
            </body>
        </ons-page>
    </div>
</template>

controllers.js:

myApp.controller("traditionalRosaryController", function($scope) {

    $scope.textstuff="nom nom";

    $scope.advance=function()
    {
        $scope.textstuff="awesome";
    };
});

index.js

window.fn = {};

window.fn.open = function() {
    var menu = document.getElementById('menu');
    menu.open();
};

window.fn.load = function(page) {
    var content = document.getElementById('content');
    var menu = document.getElementById('menu');
    content.load(page)
        .then(menu.close.bind(menu));
};

Solution

You have a typo in your HTML

Change ng=click="advance()" to ng-click="advance()"

Note the dash rather than the equals sign.