Angular JS event for page rendered using ui.router

Question

Background Scenario:

I have an ng-repeat that populates my view, dynamically enlarging the <div> container.

I need to adjust the height of my <div> when the rendering is complete, and I also need to do that on every other page of my app.

I'm well aware of the ready() function:

    angular.element(document).ready(function() {
        console.log('ready')
    })

But this code, put in app.js get executed only on the first page opening (or reloading).

---

Important note:
I'm using ui.router to navigate through my "pages", so I call an `$state.transitionTo()' whenever I need to change page.

---

Question: Is there an Angular event that gets broadcasted whenever the page has fully rendered?

Answer 1

While looking for a solution, I've found that there is an ui.router event that gets called whenever the DOM has been fully rendered (on each new state transition)

The event is $viewContentLoaded and the syntax is pretty straight forward:

    $rootScope.$on('$viewContentLoaded', function (event) {
            console.log('lock & loaded')
    })

I thought that could be useful to someone else,
Cheers