AngularJs: Run Directives after View is fully rendered

Question

I'm new to all Angular World, and i'm facing a problem managing the directives.

I'm working on a project that uses Tabs, and i want to extend its functionality to handle overflowed tabs when window size is narrower that the width of all my tabs, so i need to calculate some dimensions of elements to achieve this. The tabs are built from an Object in $scope, the problem is that the directive that calculates the dimensions is run before the view is fully compiled.

Plnkr Link: http://plnkr.co/edit/LOT4sZsNxnfmQ8zHymvw?p=preview

What i've tried:

1. loading the template in directive using templateUrl
2. working with transclude
3. to use $last in ng-repeat
4. try to reorder directive and create a dummy directive in every tab to trigger an event

I think that there is some AngularJs event, or property to handle this situation.

Please Guys Help :)

Answer 1

I make a branch on your plunker, I I think this is what you were looking for

I change your directive to this

.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

Then on your HTML I added the directive

 <li ng-repeat="tab in tabs" on-finish-render-filters>

And the last thing I put the code I want to run after the repeat finish

$scope.$on('ngRepeatFinished', function (ngRepeatFinished) {
        $scope.tabs = [{
            index: 1,
            title: "Tab 1",
            link: "/tab1/"
        },{
            index: 2,
            title: "Tab 2",
            link: "/tab2/"
        },{
            index: 3,
            title: "Tab 3",
            link: "/tab3/"
        },{
            index: 4,
            title: "Tab 4",
            link: "/tab4/"
        }];

  });

http://plnkr.co/edit/TGduPB8FV47QvjjLnFg2?p=preview

Answer 2

You can add a watch on the actual DOM elements in order to know when your ng-repeat is loaded into the DOM.

Give your ul an id, say #tabs

$scope.$watch(
    function () { return document.getElementById('tabs').innerHTML },  
    function(newval, oldval){
        //console.log(newval, oldval);
        //do what you like
    }, true);