Buttons Not Working in AngularJs - angularjs

Question

This is supposed to be a simple registration page. At this stage of the game all I want to do is have an error logged to the console when I try to submit, but the buttons on the registration page are dead, as if they're not connected to my controller and directive at all.
console.log works otherwise, as I will get the path location logged. (See the constructor.) All of the form validation code in register.html works splendidly.
It gets crazier: If I remove the <navbar></navbar> from register.html all of the sudden the submit button works. I get the error logged to the console, but the evaluate button still does nothing. I have the navbar directive on a few other pages and their buttons all work correctly.
register.ts
class Register implements IRegisterCtrl {
constructor(public $http: ng.IHttpService,
public $location: ng.ILocationService) {
console.log($location.path());
}
public sendIt(): void {
console.log("submit run.");
var url: string = "/";
var user: any = {};
this.$http.post(url, user)
.then(function (res: any): void {
console.log("success http");
})
.catch(function (err: any): void {
console.log("fail http");
});
}
public static evaluateIt(): void {
console.log("evaluated");
}
} // end class
function register(): ng.IDirective {
return {
bindToController: true,
controller: Register,
controllerAs: "vm",
replace: true,
restrict: "AE",
template: require("./register.html"),
};
}
angular
.module("app")
.directive("register", register);
register.html
<div>
<!-- when this is removed, sendIt() works, but not evaluateIt() -->
<navbar></navbar>
<div class="container-fluid">
<form name="register" ng-submit="vm.sendIt()" class="form-signin" novalidate>
<h1 class="form-signin-heading text-muted">Register</h1>
<input name="email" placeholder="Email Address" type="email" class="form-control" maxlength="320"
ng-model="vm.email"
ng-minlength="7"
required>
<div ng-messages="register.email.$error" ng-if="register.email.$touched">
<p class="help-block" ng-message="required">An email address is required.</p>
<p class="help-block" ng-message="minlength">This email address is too short.</p>
<p class="help-block" ng-message="email">Please enter a valid email address.</p>
</div>
<input name="password" placeholder="Password" type="password" class="form-control" maxlength="115"
ng-model="vm.password"
ng-minlength="6"
required>
<div ng-messages="register.password.$error" ng-if="register.password.$touched">
<p class="help-block" ng-message="required">A password is required.</p>
<p class="help-block" ng-message="minlength">Too short. Try an entropic phrase.</p>
</div>
<input name="password_confirm" placeholder="Confirm Password" type="password" class="form-control" maxlength="115"
ng-model="vm.password_confirm"
required>
<p class="help-block" ng-show="register.password_confirm.$dirty && vm.password !== vm.password_confirm">Please make the passwords match.</p>
<button ng-disabled="register.$invalid || vm.password !== vm.password_confirm" class="btn btn-lg btn-primary btn-block" type="submit">
Submit
</button>
</form>
<button type="button" ng-click="vm.evaluateIt()">Evaluate</button>
</div>
</div>
I'm using webpack, but I'm not minifying anything right now. All other pages work as they should.
How can I have the buttons work as normal? Why could the navigation bar be conflicting with the submit button in this instance?
navbar.ts
class Navbar implements INavbarCtrl {
} // end class
function navbar(): ng.IDirective {
return {
bindToController: true,
controller: Navbar,
controllerAs: "vm",
replace: true,
restrict: "AE",
template: require("./navbar.html"),
};
}
angular
.module("app")
.directive("navbar", navbar);
navbar.html
<div>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">Js Algorithm Flashcards</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="dashboard">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="register">Register</a></li>
<li ui-sref-active="active"><a ng-href="/">About</a></li>
<li ui-sref-active="active"><a ng-href="/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

The problem (as you've already spotted it) is that the method evaluateIt cannot be bound to vm as it is defined as static method.
But why does the sendIt button not work when the navbar component is included in the register template ?
Because both components have non-isolated scopes and the scope is clobbered using the same alias, vm.