href causes unintended page reload with Angularjs and Twitter Bootstrap

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">

The hashbang in Angular is used for routing. Look at the tutorial for a deeper insight into how it works here.

You should also take a look at Angular UI Bootstrap.

Regular Boostrap wasn't built with Angular in mind, so there are few things that aren't in line with Angular. So the team decided to port Boostrap into Angular directives, giving you the ability to fully use Angular's ng- features (which you wouldn't be able to do easily with just regular Boostrap).

Due to the way routing works, I don't think you would be able to do what you want, and you shouldn't need to. Since you're using the <a> as a button, make it a regular button and add an ng-click:

<button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>

This is the Angular way (and how Angular UI Bootstrap works).

Lastly, in Angular, the <a> is a directive docs here, so if you want to prevent the default click, leave href="":

<a href="" ng-click="model.$save()">Save</a>

I solved:Simply just change HREF attribute by the DATA-TARGET attribute.

<div>    <!-- Nav tabs -->    <ul class="nav nav-tabs" role="tablist" id="myTabs">        <li role="presentation" class="active">            <a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>        </li>        <li role="presentation">            <a data-target="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>        </li>    </ul>    <!-- Tab panes -->    <div class="tab-content">        <div role="tabpanel" class="tab-pane active" id="home">Tortor Porta Sit</div>        <div role="tabpanel" class="tab-pane" id="profile">Duis mollis, est non commodo</div>    </div></div>