Angular Directives return with a timeout attached?

Question

So I am using footables in my website which is a jQuery plugin. I wrapped it in a angular directive like so:

angular.module('myApp').directive("footable", function() {
    return {
    restrict: 'A',
    link: function(scope, element, attrs){
        return element.footable(scope.$eval(attrs.footable));
    }
  }
});

and then I call footable like

<table class="footable" footable="{breakpoints: {'phone': '639','tablet':'767'}}">

The problem is that even though the directive is creating a footable, the footable needs 100 ms to work and if i start in mobile it doesn't reflow unless I send a timeout in my controller like this:

$timeout(function(){
            $('.footable').trigger('footable_redraw'); //force a redraw
    }, 100);

The problem with this is that I am using jquery and putting this is my page controller. I'd like to put that timeout and redraw in the directive and have it work? or is there another way to get finnicky jquery plugins to work?

Answer 1

You could always move the timeout into the directive, right?

angular.module('myApp').directive("footable", function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.footable(scope.$eval(attrs.footable));
            $timeout(function(){
               element.trigger('footable_redraw');
            }, 100);
        }
    }
});

This is a little better Angular zen, but there may be a better way to deal with this with footable itself.