Angularjs How do you call a controller method inside a javascript function defined in the html template file?

Question

I read this link: AngularJS access scope from outside js function and I tried to get access to the controller but I didn\'t setup my index.html like the fiddlejs example.

Answer 1

I figured it out with help from a friend. Here is the solution:

in the signin.html file add an id to the div at the top. In the script code use that id to get to the scope using jquery (you don't need to use the angular.element()).

signin.html

<div id="loginwidget">
   <div role="main" id="content" >
       <div id="signIn" >
       </div>
   <div>
 <div>

 <script>
    $.ready('loginwidget_main', function () { 
      loginwidget.load('signin', function () {
           done : success,
           fail : fail  
      });
  });

 function success() {
        var scope = $('#loginwidget').scope();
        scope.test();
 }

 function fail() {alert("failed to login");}

 </script>

Answer 2

You can check below code snippet here we are calling the loginwidget scope function in javascript function.

<div id="parentController" ng-controller="parentController">
    <div id='myapp' ng-view ng-cloak></div>
</div>

function myFunction(){
      angular.element(document.getElementById('parentController')).scope().myFunction();
}

Note: Here you need to define your function in parentController.