How to call a controller method from AngularJS

Question

I'm loading the tree-view structure as shown below when the user clicks on the parent/child it spit on the console.log but i'm not sure how to pass the clicked parent/child node to apex controller

       $scope.my_tree_handler = function (branch) {
            console.log('you clicked on', branch);
            //how to pass the branch to controller ?????? 
        }

Screen shot:

This is the code:

<script>
    var myApp = angular.module('myApp', ['treeGrid']);

    // controller
    myApp.controller('treeGridController', function ($scope, $timeout) {
        var tree;
        var rawTreeData = {!JSONData};
        var myTreeData = getTree(rawTreeData, 'Id', '{!relationshipFieldName}');

        $scope.tree_data = myTreeData;
        $scope.my_tree = tree = {};
        $scope.expanding_property = {
            field: "Name",
            displayName: "Name",
            sortable : true,
            filterable: true
        };
        $scope.col_defs = {!FieldsJSON};
        $scope.my_tree_handler = function (branch) {
            console.log('you clicked on', branch);
            //how to pass the branch to controller ?????? 
        }
        //..........
</script>

I have read that you can use apex:actionFunction but in my situation I need to set the values user have clicked.

EDIT: I have tried using javascript remoting function but getting the following error:

Visualforce Remoting Exception: Method 'mymethod' not found on controller RN_sObjectHierarchy. Check spelling, method exists, and/or method is RemoteAction annotated.

$scope.my_tree_handler = function (branch,scope) { 
                  Visualforce.remoting.Manager.invokeAction(
                   "RN_sObjectHierarchy.mymethod", branch.param,
                        function(result, event) {
                            if(result) {
                                scope.$apply(function(){
                                scope.result = result;

                                });
                                // something more to do?
                            } else {
                                console.log("There was an error");
                            } 
                        },
                   {escape: false} // No escaping, please
              );
        }

Controller:

@RemoteAction
public static void mymethod(String name){
    system.debug('///' +  name);
}

Answer 1

You can use javascript remoting function inside the Angular function:-

$scope.my_tree_handler = function (branch,scope) { 
      Visualforce.remoting.Manager.invokeAction(
                   "ApexClassName.classMethod", branch.param,
                        function(result, event) {
                            if(result) {
                                scope.$apply(function(){
                                scope.result = result;

                                });
                                // something more to do?
                            } else {
                                console.log("There was an error");
                            } 
                        },
                   {escape: false} // No escaping, please
      );
}

Note the scope.$apply. This is how you set the value again. Remoting functions are asynchronous so results won't be reflected as soon as you click. It will be dependent on how soon you get the result.

You need to make sure that you always have $scope instance in function.

Answer 2

Here is how I able to get the selected row in the controller through JS remoting.

$scope.my_tree_handler = function (branch,scope) {         
            Visualforce.remoting.Manager.invokeAction('RN_sObjectHierarchy.mymethod', branch,
            function(result, event){
              //alert(result);
              //alert(event);
            },
            {escape: false}
            );
    }

Controller Class:

@RemoteAction
public static void mymethod(String branch){
    system.debug('///selectedRow:' +  branch);              
}