href not working as expected
<p>I'm using this snippet from <a href="http://bootsnipp.com/snippets/9ymbx" rel="nofollow">HERE</a>. It looks ok, but when I click on a tab, instead of changing the content of the body (<code>&lt;a href="#tab2success" data-toggle="tab"&gt;</code>), it redirects to <strong>localhost:9000/#tab2success</strong>, which does not exist. How is it possible to achieve this? I just want that when clicking on the tab, it goes to the specific content in the body. Looks like that <code>href</code> is not the solution here...</p>

<pre><code> &lt;div class="col-md-9"&gt;

      &lt;div class="panel with-nav-tabs panel-success"&gt;
            &lt;div class="panel-heading"&gt;
                    &lt;ul class="nav nav-tabs"&gt;
                        &lt;li class="active"&gt;&lt;a href="#tab1success" data-toggle="tab"&gt;Success 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#tab2success" data-toggle="tab"&gt;Success 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#tab3success" data-toggle="tab"&gt;Success 3&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
                &lt;div class="tab-content"&gt;
                    &lt;div class="tab-pane fade in active" id="tab1success"&gt;Success 1&lt;/div&gt;
                    &lt;div class="tab-pane fade" id="tab2success"&gt;Success 2&lt;/div&gt;
                    &lt;div class="tab-pane fade" id="tab3success"&gt;Success 3&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
</code></pre>

<p>PD: I'm using angularJS, so if there is any directive or something that could help, it may be also a valid option.</p>

<p>EDIT: Part of my router implementation. It's just o part of the code, because it's too longo to post it all..</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular
    .module('Test', [ //setting a module
    'oc.lazyLoad',
    'ui.router',
    'ui.bootstrap',
    'angular-loading-bar'
  ])
    .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {

        $ocLazyLoadProvider.config({
            //$ocLazyLoad returns a promise that will be rejected when there is an error but if you set debug to true,                       //$ocLazyLoad will also log all errors to the console.

            debug: false,
            events: true,
        });

        // For any unmatched url, redirect to '/dashboard/home'
        $urlRouterProvider.otherwise('/dashboard/rank');

        // Now we set up the states
        $stateProvider
            .state('dashboard', { //parent view
                url: '/dashboard',
                templateUrl: 'views/dashboard/main.html',</code></pre>
</div>
</div>
</p>