In creating a basic registration page, I encountered a strange issue with the button functionality. Whenever I attempt to submit the form, an error should be logged to the console. However, the buttons on the registration page appear to be inactive - it seems like they are not linked to my controller and directive.

Interestingly, console.log works perfectly fine in other instances, as evidenced by the path location being logged (refer to the constructor). Moreover, all validation code within register.html functions smoothly.

Here's where it gets peculiar: If I remove the <navbar></navbar> component from register.html, suddenly the submit button starts working. The error is logged to the console accurately, but the evaluate button remains unresponsive. Strangely, I have used the navbar directive on multiple other pages without any issues related to button functionality.

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>

  <!-- Removing this line fixes the submit button, but not the evaluate button -->
  <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 am utilizing webpack for bundling, however, no minification is currently applied. Interestingly, all other web pages function correctly.

Any insights on how to resolve the button functionality issue? What could be causing a conflict between the navigation bar and the submit button specifically in this scenario?

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>