Tabs - Programmatically set active tab

[im1dermike]

I can't figure out how to programmatically set the active tab where tabs aren't defined via ng-repeat given the new uib-tab design.

I'm trying to do something like this:

<uib-tab ng-click="activateTab('inProgress')" active="activeTab === 'inProgress'">
    <uib-tab-heading>In-Progress</uib-tab-heading>
        ...
</uib-tab>

$scope.activateTab = function (tab) {
    $scope.activeTab = tab;
}
$scope.activeTab = 'inProgress';

I get this error, however:

Error: [$compile:nonassign] Expression 'activeTab === 'new'' used with directive 'uibTab' is non-assignable!

[wesleycho]

= bindings do not support expressions. One needs to do active="inProgressTab" and

$scope.activateTab = function(tab) {
  $scope.inProgressTab = 'inProgress';
};

We are planning on reworking the tab API, but that is a work in progress - see #4836

[im1dermike]

I think there is an error in your code because I don't understand how that would ever work.

[MarkMYoung]

@im1dermike, I'm having a different problem, but you and @wesleycho are not talking about the same thing. As @wesleycho said, you have to provide a property to bind, not an expression to evaulate. The confusion is that the 'active' (or 'data-active') attribute on a 'uib-tabset' (or 'data-uib-tabset') is bound to a string or number property, but on a 'uib-tab' (or 'data-uib-tab') it is bound to a boolean property (same name, same context, different meaning)!

So, combining your two ideas:

<uib-tabset active="activeTab">
    <uib-tab ng-click="activateTab('inProgress')" data-ng-repeat="<you might do this here>">
        <uib-tab-heading>In-Progress</uib-tab-heading>
            ...
    </uib-tab>
</uib-tabset>

$scope.activateTab = function (tab) {
    $scope.activeTab = tab;
}
$scope.activeTab = 'inProgress';

My problem is that I cannot visual set a tab active without causing problems with child views/sub-routes.