Call AngularJS function on document ready

Question

Is there a way to call an Angular function from a JavaScript function? ``` function AngularCtrl($scope) { $scope.setUserName = function(student){ $scope.user_name = 'John'; } } ``` I need the following functionality in my HTML: ``` jQuery(document).ready(function(){ AngularCtrl.setUserName(); } ``` The problem here is my HTML code is present when page is loaded and hence the ng directives in the html are not compiled. So I would like to `$compile(jQuery("PopupID"));` when the DOM is loaded. Is there a way to call a Angular function on document ready?

Accepted Answer

Angular has its own function to test on document ready. You could do a manual bootstrap and then set the username:

```
angular.element(document).ready(function () {
    var $injector = angular.bootstrap(document, ['myApp']);
    var $controller = $injector.get('$controller');
    var AngularCtrl = $controller('AngularCtrl');
    AngularCtrl.setUserName();
});
```

For this to work you need to remove the ng-app directive from the html.

Call AngularJS function on document ready

Solution

Problem

Related problems