Run javascript code after all the AngularJS template directives have loaded

I have a html page that is using AngularJS template directives that looks like this:

<div class="row">
        <div class="col-sm-12">
            <div logo></div>
            <div login-card></div>
            <div info></div>
        </div>
    </div>

My directives look like this:

myApp.directive('logo', function(){
    // Runs during compile
    return {
        templateUrl: "components/logo.html"
    };
});

myApp.directive('loginCard', function(){
    // Runs during compile
    return {
        templateUrl: "components/login-card.html"
    };
});

myApp.directive('info', function(){
    // Runs during compile
    return {
        templateUrl: "components/info.html"
    };
});

There is a controller called loginController that is specified in the routes using ngRoutes like this:

when("/login", {
        templateUrl: 'login/login.html?version=3',
        controller: 'loginController'
    }).

When my page has finished loading I want it to scroll directly to the login card on smaller devices. For that I put this code in my loginController:

$document.ready( function () {
        if ( $(window).width() < 768 ) {
            $('html,body').animate({ scrollTop: $(".page-top").offset().top}, 'slow');
        }
    })

And, my login-card.html looks like this:

<div class="page-top">
 --some code here--
</div

The problem is that the $document.ready function fires before the partials are loaded, so it cannot find the div with the specified class named page-top.

What would be the best way to make Angular wait till the template is loaded, so it can scroll to it?

Can this be achieved by using promises, I never used them before?

If you want to use promises then see this http://jsfiddle.net/Zenuka/pHEf9/21/
But I think the other solution is you can use $timeout for this problem

$timeout( function(){
            $document.ready( function () {
        if ( $(window).width() < 768 ) {
            $('html,body').animate({ scrollTop: $(".page-top").offset().top}, 'slow');
        }
    })
        }, 2000 );

Now your function runs delay of 2 sec. You can change the time according to your requirements.

i think writing your code in link function of directive will do that because on link method the login html is available in DOM

myApp.directive('loginCard', function () {
        return {
            templateUrl: "login-card.html",
            link: function (scope, element, attrs) {
                //Your code to adjust view
                console.log(document.getElementsByClassName('page-top'));
            }
        }
    });