'state is not defined' in Angular typescript controller

// Typescript

module MyApp {
  export class LoginController {
    email: string;
    password: string;
    loginForm: any;
    state: any;

    constructor($state: ng.ui.IStateProvider) {
      this.state = $state;
    };

    login() {

      if (this.loginForm.$invalid) {
        this.formError = "invalid form data";
        return;
      }

      this.formError = "";

      console.log(`Login was clicked, email is ${this.email} and password is ${this.password}`);
      this.state.go('Dashboard');
    }
  }
}

let app = angular.module('myApp', ['ui.router'])
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('login', {
      url: '/login',
      template: `
      	<div ng-controller="loginController as lc">
          <form name="lc.loginForm" ng-submit="lc.login()">
            <div>Email:<input ng-model="lc.email" ng-required="true" /></div>
            <div>Password: <input ng-model="lc.password" ng-required="true" /></div>
            <button type="submit" ng-click="lc.login()">Click</button>
          </form>
        </div>      
      `
    })
    .state('Dashboard', {
      url: '/Dashboard',
      template: '<div> I am Dashboard </div>'
    });

  $urlRouterProvider.otherwise('/login');
});

app.controller('loginController', MyApp.LoginController);

<!-- HTML -->
<div ng-app="myApp">
  <div ui-view></div>
</div>