Conflict between tabarray and ng-animate, caused by a known bug in angular #33

Bug

Hi everybody

I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package.
When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.

Expected behaviour

I expect them to be shown.

Actual behaviour

The form fields within the tab are not displayed until the "add" button is clicked.

Gist/Plunker/Demo

Link to the plunkr

Related issues

This is related to (angular/angular.js#10811)

Other info

As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged.
One can also disable ng-animate.

How to solve the problem

The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class.
In this particular situation ng-class is never evaluated.
This is the case of:
/0.2.0/src/tabarray.html
where we have

      <div class="tab-pane clearfix tab{{selected.tab}} index{{$index}}"
           sf-field-model="ng-repeat"
           ng-repeat="item in $$value$$ track by $index"
           ng-show="selected.tab === $index"
           ng-class="{active: selected.tab === $index}">

Here there are two interpolated variables inside "class" (selected.tab and $index), and ng-class is never evaluated.
So the tab-pane doesn't get the active class, that gives to it display:block over the default "display:none".
I suggest you to remove the tab{{selected.tab}} in order to solve the problem.
I'll send a pull request to do it.
After doing that everything will work fine (I have already tested it locally).

Best regards,

Patrizio Tufarolo
@json-schema-form/angular-schema-form-bootstrap-lead