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.