How do I execute foundation js call after images are loaded in AngularJS ngview?

Question

I'm creating a web application with AngularJS and Foundation.

The problem arises when I use the Orbit content slider packed with Foundation. It requires a call to foundation's initializing function $(document).foundation(). As I am using an ng-view and the AngularJS routing features I have to recall this function every time a new view is loaded. I tried achieving this by putting the call in to the controller function loaded by every route. But I think this causes the script to run too soon (right before the images or the actual view is loaded) as it doesn't show the orbit slider until I either reload the view or page (I'm guessing the images have cached by then in the background and can be loaded soon enough). I also tried using the $routeChangeSuccess event for calling the foundation function, but this gives me the same result.

I also created a directive that binds with the image load event, now even tho this actually works, and the slider shows correctly from the first time loading the view, the foundation call has to be made on pages without images too, plus there is some content flashing when using this approach(I can actually see the UL item bullets appear and disappear used by Orbit)

I just started working with AngularJS so I'm not sure what I'm doing/saying is entirely correct. :)

I did some research and I read something about promises and resolves that might help me find a solution for this problem, but I haven't been able to see how this would be done.

Thanks in advance!

Answer 1

I forgot about this question!

Even tho art-jitsu his answer probably works as well, I think there is a better solution.

Some people did a complete Angular based rewrite of the Foundation JavaScript plugins.

http://pineconellc.github.io/angular-foundation/

Answer 2

I'm late to the party but for others here is how to load foundation after ng-view loaded. Initialize foundation when the view is loaded.

angular.module('exampleAppApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
// initialize foundation here...
.run(function($rootScope) {
 $rootScope.$on('$viewContentLoaded', function () {
   $(document).foundation();
});
});