Foundation range sliders only work after launching browser console

Question

I'm coding an application using AngularJS v1.3.0 and Foundation 5.0.3. In one of my pages, I have a a couple of fieldsets, each one containing a few range sliders. Something like this

<fieldset ng-repeat="element in list" id="element_{{element.ID}}">
  <legend>Element: {{element.name}}</legend>
  <div ng-repeat="subelement in element.list" id="subelement_{{subelement.ID}}">
    <div class="small-10 medium-11 columns">
      <div class="range-slider round" data-slider="50">
        <span class="range-slider-handle"></span>
        <span class="range-slider-active-segment"></span>
      </div>
    </div>
  </div>
</fieldset>

The problem is I can't move the sliders until I open the browser console. It happens in Firefox and Chrome. I guess AngularJS defines some variables when the debug mode is activated in the browser, and this causes the problem. But I don't really know...

Any clues?

Many thanks in advance

Answer 1

Try adding this run function to your angular app.

.run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $(document).foundation();
    });
});

Answer 2

While this doesn't have the range slider in it yet, if you are using angular with foundation you should check out this: http://pineconellc.github.io/angular-foundation/