Initializing jquery plugins in angularjs directives

I think the best way to solve this problem is using a watcher inside your directive.

var app = angular.module('app', []);

app.controller('Main', function ($scope, $timeout) {

   //this simulates data being loaded asynchronously after 3 second 
   $timeout(function () {
       $scope.list = [1, 2, 3, 4];
   }, 3000);

});

app.directive("mydirective", function()
{   
    return {
        restrict: "A",
        link: function(scope, element, attrs)
        {
            scope.$watch('list', function (newVal, oldVal) {
                if (newVal) {

                    //initialize the plugns etc
                    scope.result = 'Model has been populated';
                }    
            });
        }
    };
});

In my example I am using $timeout inside the controller to simulate an async load of data, once the 'list' model gets populated the watcher inside the directive will realize it (newVal is not empty or undefined) and then the plugin can be initialized. This is a better approach instead of callbacks inside the controller because your code is much more concise.

Here is a jsBin

EDIT:

Just remember that the digest cycle has to be fired when the model is populated. If you are using $resource or $http to fetch the data from the server you don't have to worry, but if you are doing it outside Angular you will have to fire the digest cycle with $scope.$apply() so the watcher can be aware that the model was populated.