AngularJS and UI-Bootstrap Tabs, using ng-class to modify tab

I'm afraid you can't use ng-class directly on the ui-tab. The issue here is that the contents (and attributes) of the ui-tab is trancluded into this. Which has its own ng-class that's clobbering yours. Heres the only workaround I've managed to find/use.

Use class along with ng-class like this:

<uib-tabset>
    <uib-tab class="{{complete}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">

    <!-- Repeated Content -->

    </uib-tab>
</uib-tabset>

Note, however, that complete will have to be a string for it to work properly. If its a boolean then your probably have better luck doing:

<uib-tabset>
    <uib-tab class="{{complete ? 'complete':''}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">

    <!-- Repeated Content -->

    </uib-tab>
</uib-tabset>

Should you need to put multiple classes then I'd create a function that returns the classes in a string:

<uib-tabset>
    <uib-tab class="{{isCompleted}}" ng-repeat="tab in tabs" heading="{{tab.TAB_NAME}} : {{tab.Questions|sumByKey:'count'}} of {{tab.Questions.length}}" active="tab.active" disable="tab.disabled">

    <!-- Repeated Content -->

    </uib-tab>
</uib-tabset>

In controller:

$scope.isCompleted = function () {
    // some logic
    return 'complete done';
}

Hope that helps you somewhat.