UPDATE. Hmm, it was much simpler than I thought. Just using

  <tabset vertical="true" type="pills">
                            <tab ng-repeat="tab in tabsViews" select="selectView(tab.index)"
                                 class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
                                <tab-heading>{{tab.title}}</tab-heading>

                            </tab>

worked!!!

Hi everybody,

I had the following markup:

<tab select="selectView(1)" 
                            class="{{tabsViews[0]['invalid'] ? 'invalid-tab': '' }}">
                                <tab-heading>@Labels.general</tab-heading>
                            </tab>

                            <tab heading="@Labels.passes" select="selectView(2)">

                            </tab>

                            <tab heading="@Labels.history" select="selectView(3)">

                            </tab>
                            
                            <tab select="selectView(4)" class="{{tabsViews[3]['invalid'] ? 'invalid-tab': '' }}">
                                <tab-heading>@Labels.userDefined 1</tab-heading>
                            </tab>                     
                            
                            <tab select="selectView(5)" class="{{tabsViews[4]['invalid'] ? 'invalid-tab': '' }}">
                                <tab-heading>@Labels.userDefined 2</tab-heading>
                            </tab>

which worked fine.

Now I am trying to use a shorter syntax with ng-repeat directive. I have the following in my controller:

 $scope.tabsViews = [{
                index: 1, name: 'general',
                invalid: false, title: resourceFactory.getResource('Labels', 'general')
            },
            {
                index: 2, name: 'guestPasses', invalid: false,
                title: resourceFactory.getResource('Labels', 'passes')
            },
            {
                index: 3, name: 'guestActivity', invalid: false,
                title: resourceFactory.getResource('Labels', 'history')
            },
            {
                index: 4, name: 'userDefined1', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 1'
            },
            {
                index: 5, name: 'userDefined2', invalid: false,
                title: resourceFactory.getResource('Labels', 'userDefined') + ' 2'
            }];

and I am attempting the following for the markup:

 <tabset vertical="true" type="pills">
                            <tab ng-repeat="tab in tabsViews" select="{{ 'selectView(' + tab.index + ')' }}"
                            class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}">
                            <tab-heading>{{tab.title}}</tab-heading>

                            </tab>
                        </tabset>

and I am getting the

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{'selectView(' + tab.index + ')'}}] starting at [{'selectView(' + tab.index + ')'}}].

I am wondering what would be the correct syntax to get the same markup as before but using my tabsViews and ng-repeat?

Thanks a lot in advance.