AngularJs event to call after content is loaded

According to documentation of $viewContentLoaded, it supposed to work

Emitted every time the ngView content is reloaded.

$viewContentLoaded event is emitted that means to receive this event you need a parent controller like

<div ng-controller="MainCtrl">  <div ng-view></div></div>

From MainCtrl you can listen the event

  $scope.$on('$viewContentLoaded', function(){    //Here your view content is fully loaded !!  });

Check the Demo

Angular < 1.6.X

angular.element(document).ready(function () {    console.log('page loading completed');});

Angular >= 1.6.X

angular.element(function () {    console.log('page loading completed');});

fixed - 2015.06.09

Use a directive and the angular element ready method like so:

js

.directive( 'elemReady', function( $parse ) {   return {       restrict: 'A',       link: function( $scope, elem, attrs ) {              elem.ready(function(){            $scope.$apply(function(){                var func = $parse(attrs.elemReady);                func($scope);            })          })       }    }})

html

<div elem-ready="someMethod()"></div>

or for those using controller-as syntax...

<div elem-ready="vm.someMethod()"></div>

The benefit of this is that you can be as broad or granular w/ your UI as you like and you are removing DOM logic from your controllers. I would argue this is the recommended Angular way.

You may need to prioritize this directive in case you have other directives operating on the same node.