Disable bootstrap tab
<p>We have tabs at one of our page. What we are trying to do is disable the tabs when page loads initially and then enable them on click of a button. I have tried to add 'disabled' class when defining the tabs in my view:  </p>

<pre><code>  &lt;ul class="nav nav-tabs"&gt;
                                &lt;li id="tbReady" role="presentation" class="disabled"&gt;&lt;a data-toggle="tab" href="#ready" ng-click="tabClick('tbReady')"&gt;Ready to Submit&lt;/a&gt;&lt;/li&gt;
                                &lt;li id="tbAction" role="presentation" class="disabled"&gt;&lt;a data-toggle="tab" href="#action" ng-click="tabClick('tbAction')"&gt;Action Required&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
</code></pre>

<p>When the page loads, they appear disabled but when you click a tab they become active again. I also tried to remove data-toggle from definition and then in tabClick function tried to return false but it is still not working</p>

<pre><code>   $scope.tabClick = function (selTabName) {

            if ($('#'+selTabName).hasClass('disabled')) {
                    return false;
                }


            if (selTabName == 'tbReady') {
                listReadyRows($rootScope.caseFileId);
            } else {
                listActionRows($rootScope.caseFileId);
            }
          }
</code></pre>

<p>Can somebody see what I am doing wrong and point me to the right direction please!</p>