ng-click doesn't fire my method

I'm getting crazy about how AngularJS + Typescript work together. Basically what I want to achieve is a simple call to a method. The problem is that I have to use a certain kind of "architecture" and I don't know where I made the mistake.

this is my interface (IAthorizathionScope.ts):

module Main {
    export interface IAuthorizationScope extends ng.IScope {
        vm: AuthenticationController;
        login: (username: string, password: string) => void;

this is my controller (AuthorizationController.ts):

module Main {
    'use strict';

    export class AuthenticationController
        public static $inject = [

        private username: string;
        private password: string;

        constructor($scope : IAuthorizationScope)
            $scope.vm = this;

        login = function (username:string, password:string) {

and this is my view (secretTest.html):

<!DOCTYPE html>
<html xmlns="">
   <div ng-controller="AuthenticationController"> 
          <label>Username: <input type="text" ng-model="username"/> </label>
          <label>Password: <input type="password" ng-model="password"/> </label>
      <button ng-click="vm.login(username, password)">

EDIT This is my application file (Application.js)

module Main
    'use strict';

    var txtmobileMvc = angular.module('txtmobileMvc', ['kendo.directives'])
    // factories
        .factory('Main.ItemCommonModel', function ($rootScope)
            return new Main.ItemCommonModel($rootScope);
    // controllers
        .controller('detailCollectionController', DetailCollectionController)
        .controller('detailController', DetailController)
        .controller('gridController', GridController)
        .controller('authenticationController', AuthenticationController)
        .controller('wijmoController', WijmoController)
    // services
        .service('itemStorage', ItemStorage)
        .service('itemDataService', ItemDataService)
    // Page routing
        .config(($routeProvider: ng.IRouteProvider) =>
                .when('/', { controller: 'detailController', templateUrl: 'views/detail.html' })
                .when('/grid', { controller: 'gridController', templateUrl: 'views/grid.html' })
                .when('/secret', { controller: AuthenticationController, templateUrl: 'views/secretTest.html'})
                .when('/wijmo', { controller: WijmoController, templateUrl: 'views/wijmoTest.html' })
                .otherwise({ redirectTo: '/' });

Probably I'm also confused about how this stuff works here. Thank you in advance.


Basically the problem was that I added this code to my HTML file

<!DOCTYPE html>
<html xmlns="">

and the controller couldn't fire up my methods. Also I realised that if I add the controller to the


I needn't to add the ng-controller to the HTML file. With those two things, the login() method was fired up by the ng-click. Thank you anyway for your help.

As mentioned in the comment you are missing an ng-app

Additionally the controller name you are registering .controller('authenticationController', AuthenticationController) should match the name in ng-controller ng-controller="AuthenticationController"

I would make both AuthenticationController

Need Your Help

Fill a div gradually when going on another element

jquery html css

I am looking to set up a menu that changes color gradually depending on its position on the various div a site.

Violation of Command-Query Separation while creating new database entry

c# entity-framework coding-style command-query-separation

I have a method that creates some entry in database and returnes it's Id. I would like to somehow separate these two because it violates Command-Query Separation.