Buttons Not Working in AngularJs

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 <a href="http://lifehacker.com/5893510/using-common-phrases-makes-your-passphrase-password-useless-heres-how-to-pick-a-better-phrase">entropic phrase</a>.</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>