[SOLVED] Zurb Foundation Abide and AngularJS initialization

Zurb Foundation Abide and AngularJS initialization

I am using both AngularJS and Zurb Foundation.To initialize Foundation you have to make the following call:

$(document).foundation()

But, when you load a new view using angularjs foundation js is not working anymore and you need to re-initialize Foundation again, i have done it like this:

app.run ($rootScope)=>
  $rootScope.$on '$viewContentLoaded', ()=>
    $(document).foundation()

When loading the first view, Abide works, but when loading another view using $routeprovider it doesn't work anymore. Expected Result:

enter image description here

The result after loading the view:

enter image description here

Any help would be greatly appreciated, thanks!

Solution

The best choice would be wrapping Foundation plugins in angular directives or using only CSS/SASS provided by the framework. The workaround that i found is to include the plugin script in the AngularJS view.Either way AngularJs and Zurb Foundation do not play well together.