A switch that is not visible on page load will not be properly initialized

[Splaktar]

Using:
bootstrap-switch: v3.0.2
angular-bootstrap-switch: v0.4.0-alpha.1 - 2014-11-21
angularjs: 1.3.6

If the switch is within a tab that isn't initially visible, then it will not be initialized properly with the value of its ng-model. This is also true with other components that contain/hide the switch like angular-wizard, angular-material tabs (md-tab), etc.

The scope.$watch(attrs.ngModel, function (newValue) { is called properly and sets the state on the element. Later when the element becomes visible, the value is correct but the display state is not.

We're currently working around the issue by setting up an interval which polls to see when the element becomes visible and then makes the call to:

element.bootstrapSwitch('state', newValue === getTrueValue(), true);

This seems to set both the value and display state properly so that they stay in sync, There is likely a better solution.

This does not appear to be covered by an existing test since I was able to clone the project and run the Karma tests with AngularJS 1.3.6. They all passed.

[frapontillo]

Could you please do 2 things?

1. Try out the latest develop branch of angular-bootstrap-switch
2. Reference a plunker where the issue is clear

Thanks.

[Splaktar]

Verified that it is reproducible with latest develop version of angular-bootstrap-switch.
Working on a plunker.

[Splaktar]

Plunker here: http://plnkr.co/edit/pyAhiI?p=preview

[burakkilic]

+1 I have the same issue.

[frapontillo]

Setting up an interval to solve this seems pretty hackish... Do you guys feel like this is an AngularJS issue? It surely looks like that to me.

[dlwhiteman]

I don't think this is an AngularJS issue because I am also experimenting with another 3rd party switch widget, and it is not having this problem.

[Splaktar]

Another fix that I had to do for an internal directive was to put a $scope.watch on the isolated scope attributes coming into the directive. AngularJS wasn't keeping them in sync with the outside scope changes. Using the watch allowed late changes to the outside model to be reflected within the directive.

Either this is a bug in AngularJS or a new requirement for how isolated scope is supposed to work. I haven't figured out which yet.

[treyhoover]

Has there been any progress on this? I'm facing the same issue.

[frapontillo]

I haven't had any time to work on this, sadly. I will gladly accept PRs that do not make use of polling or any terrible hacky workaround.

[treyhoover]

Actually, it seems to be fixed for me in v0.4.0-alpha.1.

[j-r-t]

it happened to me using the non angular bootstrap switch and quite funny how I stumbled across this thread randomly considering ive been using both. it appears it is a bug in bootstrap switch library IMO.

i worked around by initing the switch upon showing the tab - best I could do for now.

[frapontillo]

@jessertaylor are you able to put up an issue on the bootstrap-switch repository?

[j-r-t]

@frapontillo will do

[leewisestamp]

Any update on this?

[frapontillo]

@leewisestamp the parent bug hasn't been fixed yet.

[albertjose]

Someone got something to fix this issue?