Why a href in a UL does not work when the ng-class (condicional) is true

See more:

HTML

href

AngularJs

I have a list of tabs which I show them from 7 at a time within a div with the following code.

<div>
<ul class="nav nav-tabs" style="margin-left: 10px; width: 750px; float: left;">
    <li ng-repeat="tab in contentBar.tabs | orderBy: 'order_tab' | startFromGrid: currentPage * pageSize | limitTo: pageSize"
        ng-init="setFirstActiveTab('#'+ tab.tabDesign.id_tab_design.toString() + contentBar.id_content_bar.toString())"
        ng-click="ActiveTab($event)"
        ng-class="{active: selectedTab == ('#'+ tab.tabDesign.id_tab_design.toString() + contentBar.id_content_bar.toString())}">
        <a class="fonts"
           ng-href="#{{tab.tabDesign.id_tab_design.toString() + contentBar.id_content_bar.toString()}}"
           data-toggle="tab">
            {{tab.tabDesign.ui_tab_name}}
        </a>
    </li>
</ul>
</div>

What I have tried:

With the "ActiveTab" method, set the id of the tab that you just selected to the variable "selectedTab". Then with the evaluation of the ng-class, I determine if the tab should be Active or not, this because when displaying the tabs in groups of 7, it should be paged and the last active tab should be maintained.

The problem is that when in the ng-class the condition gives a true result, when clicking on the different tabs they remain static, that is, they do not browse, but if the last selected one remains active when the page is made.

What is it that may be happening, that the href is not working in this condition?