Bootstrap Tabs with AngularJS

Problem

I have a problem using the bootstrap tabs in AngularJS.

 <div class="tab-container">
    <ul class="nav nav-tabs">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
 <div class="tab-content">
    <div class="tab-pane active cont" id="home">
        <h3 class="hthin">Basic Tabs</h3>
        <p>This is an example of tabs </p>
     </div>

     <div class="tab-pane cont" id="profile">
       <h2>Typography</h2>
       <p>This is just an example of content 
     </div>

     <div class="tab-pane" id="messages">..sdfsdfsfsdf.
     </div>
  </div>
</div>

The problem is that when I select a tab for example Home or Profile, I am redirected to /home or /profile url instead of showing the content of the tab itself.

I have a feeling that this can be somehow acheived with a directive and prevent the redirect to the page home or profile, instead show the tab content.

Problem courtesy of: David Dury

Solution

You could try using the Angular UI bootstrap components located here, http://angular-ui.github.io/bootstrap/

Solution courtesy of: Richard Edwards

Discussion

Directive can help you to handle it.

app.directive('showTab', function () {
    return {
        link: function (scope, element, attrs) {
            element.click(function (e) {
                e.preventDefault();
                jQuery(element).tab('show');
            });
        }
    };
});

<a show-tab href="#tab_1">
    Tab 1
</a>

Source

Discussion courtesy of: Xyroid

this code will solve the problem while using Angularjs

<div class="tabbable tabs-below" ng-init="selectedTab = 1;">
                        <ul class="nav nav-tabs nav-justified">
                            <li ng-class="{active: selectedTab == 1}">
                                <a href="#" ng-click="selectedTab = 1;">Personal</a>
                            </li>
                            <li ng-class="{active: selectedTab == 2}">
                                <a href="#" ng-click="selectedTab = 2;">Education</a>
                            </li>
                            <li ng-class="{active: selectedTab == 3}">
                                <a href="#" ng-click="selectedTab = 3;">Contact</a>
                            </li>
                        </ul>

                        <div class="tab-content" ng-show="selectedTab == 1">
                        1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>

                        <div class="tab-content" ng-show="selectedTab == 2">
                        2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>

                        <div class="tab-content" ng-show="selectedTab == 3">
                        3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
Discussion courtesy of: MSH

replace href with data-target.

<li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li>
Discussion courtesy of: Rej

This recipe can be found in it's original form on Stack Over Flow.