href causes unintended page reload with Angularjs and Twitter Bootstrap

Question

I am working on a project that uses Angularjs and Twitter Bootstrap.

Bootstrap uses # to toggle components such as popover, modal etc. for example:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

The problem is when I click on button with such href attribute, it causes full page reload, which means, everything in current page is lost. Is there a way to prevent this?

some extra info:

when i hover on the button, the url is weird. for example, my current page's url is

localhost:8080/#/account

the button's href is

href="#myModal"

I expect to see url

localhost:8080/#/account#myModal

However, what I see is

localhost:8080/#myModal

I am not sure if this is related to my problem.

Thanks in advance!

EDIT 1

I have seen the other post that Stewie talked about. It explains html5mode and hashbang in angularjs, but it doesn't really solve my problem.

I tried putting html5mode, and it still reloads the page when i click on the button

Answer 1

This is because of HTML link rewriting of Angular, explained here.

To prevent rewriting of location, add target=_self to those bootstrap links.

So instead of <a href="#myModal"> you need <a href="#myModal" target="_self">