Angular determine if view is complete

I currently have a few ng reruns, in my opinion, for setting the agenda. Whenever I have an ng-repeat I can turn on directive checking if the ng-repeat is executed to run the method. Works great ...

The problem is that I have 5 ng-repetitions, I don't want to include a directive for all 5 ng-repetitions and check the method if all 5 have called the method ... I just want to determine if all my ng-repetitions ( and others angular) are completed creating the view, so for example I can schedule appointments to the agenda via JQuery. Due to the appointment to agenda (div) appointments to agenda (div) was not created.

Thanks in advance!


I am using a REST server to get assignments. So I can't just get the appointments and try to show them in the agenda, because the view might not end up generating (using ng-repeats) ....

So, I need something that is a trigger that is created by the view (all ng repeats need to be done) so that I can start making appointments.


source to share

4 answers

there is a trick in Angular using $ timeout to delay execution of certain parts of the code until all directives are restored. I'm not sure if it will work in this case, but you can try.

In your controller, just add

$timeout(function() {
  // code to execute after directives goes here




You should use $viewContentLoaded

, not any directive, as this fires after everything in the loaded view. Documentation:

Example code: $scope.$on('$viewContentLoaded', function(event) { // Your Code Goes Here });

Please note that this will only work if you are using ng-view

from routing.



You are probably better off not using jQuery to populate the agenda, but instead using Angular. This makes it easy to wait for the data to load, which is much easier to detect, and Angular will ensure that the DOM is loaded whenever possible.

In your case, you can probably do something like this:


$scope.days = [];
//Here we create the days for the calendar (7 in this case)
for (var i = 0; i < 7; i++) {
    var hours = [];
    //and the hours, with an empty appointment array for each hour
    for (var i = 0; i < 24; i++) {
        hours.push({ appointments: [] });
        hours : hours
//Then we can get the appointments from your api
getAppointments().then(function(appointments) {
    //and add the results to the arrays created above
    appointments.forEach(function(appointment) {
        //This is some simplified logic that only uses the day of the week
        //and hour of the appointment. Your logic would probably a bit more complex 
        //to properly put the appointment in the correct array
        var day =;
        var hour =;



<div class="days" ng-repeat="day in days">
    <div class="hours" ng-repeat="hour in day.hours">
        <!-- I assume you have one hours div in which all appointments for that hour will go -->
        <div class="appointments" ng-repeat="appointment in hour">
            {{ appointment.title }}



However, if you really want to detect when the view has finished loading, you have several options:

  • Wait for all your data to load and then use $timeout

    to make sure it has been rendered.

It will look something like this:

var somePromise = getPromise();
var someOtherPromise = getOtherPromise();
$q.all([somePromise, someOtherPromise])
    .then(function() {
        //At this point all data is available for angular to render
        $timeout(function() {
            //and now everything should actually be rendered


  1. Look $viewContentLoaded

    , but this only works if you are using ng-view

    and can start too early if your data is being loaded asynchronously (I'm not entirely sure about the details here, since I usually avoid detection when the view is loaded).

  2. If all of the above fails, you can simply continually check to see if the desired elements are loaded on the page.



You can use angularjs directive to do this. With the directive, you can set a ready event for any dom element.

See this great post and question for more details .



All Articles