Tabpanel does not work with angular

Question

I’m making a screen that has some tabs, I don’t have much familiarity with it, so I’m making an example:

<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">teste</div>
        <div role="tabpanel" class="tab-pane" id="profile">teste</div>
        <div role="tabpanel" class="tab-pane" id="messages">teste</div>
        <div role="tabpanel" class="tab-pane" id="settings">teste</div>
    </div>

</div>

But it turns out that the whole project is done in angular, and we use routes to access the pages,ok... the screen with tabs usually opens everything right, but by clicking on a tab to change its content, the site goes back to the home page, someone knows how to fix it?

Answer 1

As our friend Brayan mentioned in his post, it is necessary to change href="#home" to data-target="#home".

=> data-target recognizes by the ID passed to tab, for example:

// Tab

<div role="tabpanel" class="tab-pane active" id="home">teste</div>

http://getbootstrap.com/javascript/#tabs-methods

Answer 2

After testing here I arrived at a solution, which was to take out the href and put data-target.

 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

I traded for that:

 <li role="presentation" class="active"><a data-target="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>