javascript - Load some functions after successful render of custom directive -

i have directive shown below:

angular.module("myapp") .directive('formprogress', function () {     return {         restrict: 'e',         scope: {             headingfirst: "@",             headinghighlight: "@",             values: "=",             numwords: "=",             customcallback: "&"         },         templateurl: 'partial-htmls/toolbox/form-progress.html',         link: function(scope, elm, attrs){             /* rendering before template rederred */             /* should render after directive has rendered right? */             console.dir(arguments);             commonutilities.navigatetoform(3);         }     }; }); 

i trying call callback function after successful load of custom directive.

i tried using link property mentioned in link.

and tried defining loadcallback function in $scope object , call in custom directive:

$scope.loadcallback = function(){     //here view content loaded !!     commonutilities.navigatetoform($state.current.formindex); } 

and in html:

<form-progress customcallback="loadcallback()"> </form-progress> 

but didn't work. tried following in controller isn't working either.

$scope.$on('$viewcontentloaded', function(){     //here view content loaded !!     commonutilities.navigatetoform($state.current.formindex); }); 

you can call callback directive itself.
pass controller of directive:

scope: {    customcallback: "&" }, controller: function(scope, elm, attrs){     scope.customcallback(); } 

html:

<form-progress customcallback="loadcallback"></form-progress>