Pass controller complex data to directive after render - angularjs

Question

just started learning angular, and having some trouble passing complex data from controller to directive that is executed afterRender. I have seen countless other posts but none seem to be my exact situations.
On HTML side:
<ul after-render="AssignSubCatExpnasion" class="inner">
<li class="titleLevelSecond" ng-repeat="SubCat1 in Categories[0].Children">
<div class="titleLevelSecondDiv toggle">
<span class="title"> {{ SubCat1.Name }} </span><span class="numbers">{{ SubCat1.Count }}</span>
</div>
<ul class="inner">
<li class="titleLevelThird" ng-repeat="SubCat2 in SubCat1.Children">
<div class="titleLevelThirdDiv">
<span class="title">{{ SubCat2.Name }}</span> <span class="numbers">{{ SubCat2.Count }}</span>
</div>
</li>
</ul>
</li>
On Angular Side:
<script>
var appGetBetCategories = angular.module('BetCategories', []);
appGetBetCategories.controller('GetBetCategories', function ($scope, $http) {
$http.get("http://localhost:49780/api/betcategory").then(function (response) {
$scope.Categories = response.data;
});
});
appGetBetCategories.directive('afterRender', ['$timeout', function ($timeout) {
var def = {
restrict: 'EA',
terminal: true,
transclude: false,
scope: {
Categories: '=',
},
link: function (scope, element, attrs) {
$timeout(scope.$eval(attrs.afterRender), 0);
}
};
return def;
}]);
Without a directive, all expressions execute properly, but I need to run js function called 'AssignSubCatExpnasion' after I am done with API call and have rendered my controls. I know I need to pass my controller scope to directive somehow, just can't wrap my head on how, since I already calling a function inside after-render="".
Any help or suggestions is greatly appreciated.