AngularJS stuff I'm just not getting my head around

gistfile1.txt

doctype 5
html(lang="en", ng-app="blaze-control-panel")
  head
    title 'Blaze Control Panel'
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(href="css/bootstrap.css", rel="stylesheet", type="text/css")
    link(href="css/bootstrap-responsive.css", rel="stylesheet", type="text/css")
    link(href="css/app.css", rel="stylesheet", type="text/css")
    script(src='js/lib/jquery-1.8.0.min.js')
    script(src='js/lib/underscore-1.3.3.min.js')
    script(src='js/lib/bootstrap.js')
    script(src='js/lib/angular-1.0.1.min.js')
    script(src='js/controllers.js')
    script(src='js/blaze-control-panel.js')
  body(ng-controller='MainController')
    .navbar.navbar-inverse.navbar-fixed-top
      .navbar-inner
        .container
          a.btn.btn-navbar(data-toggle="collapse", data-target=".nav-collapse")
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.brand(ng-click='setRoute("/home")') Blaze Control Panel
          .nav-collapse.collapse
            p.navbar-text.pull-right
              a.navbar-link(target='_self', href='/auth/google') Sign in with Google
            ul.nav
              li.dropdown.active
                a(data-toggle="dropdown") Ad Sources
                ul.dropdown-menu
                  li.active
                    a(ng-click='setRoute("/scenarios")') Scenarios
              li.dropdown.active
                a(data-toggle="dropdown") Campaigns
                ul.dropdown-menu
                  li.active
                    a(ng-click='setRoute("/orders")') Orders

    .container
      div('ng-view')
        block content

BTW, the link

a.navbar-link(href='/auth/google') Sign in with Google

actually should go hit the server, so I understand why the target='_self' is needed

Yep, I've had the exact same problem. If you set your a.brand(href='/home'), it should work (you don't need setRoute().

What's happening (I think) with '/auth/google' is the location is getting updated, but the routing table is defaulting to the page you're currently on. So, it looks like nothing is happening. Adding target='_self' here is the way to go.

If I remove the setRoute calls from the scenarios and orders links, they behave like regular links (i.e. they hit the server). Perhaps this is something to do with the way I have configured the locationProvider. It's configured with an empty string for hashPrefix (we can dictate browser choice) and html5Mode set to true.

Wait, so if you have two links: a.brand(href='/home') Blaze Control Panel and a.navbar-link(href='/auth/google') Sign in with Google i.e. no target='_self' on either, one hits the server and the other doesn't?

So a.navbar-link(href='/auth/google') (without the target='_self') is probably Twitter bootstrap weirdness.

Come to think of it, it all might be. I wonder if bootstrap is screwing up Angular's event handling? Seems odd because they seem to like Bootstrap in the Angular videos.

And I can confirm that the problem is Bootstrap.

If I put a link outside of the .navbar div, it works perfectly.