How to call a service function in AngularJS ng-click (or ng-change, ...)?

You need to call service functions using functions through scope. So in your example, you can call the service method inside the scope's myfunction method, provided your service is injected in to your controller.

$scope.myFunction = function(var){   myService.myFunction(var);    }

Always remember that only properties defined in $scope is available in the UI and not your services.

While Whizkids answer is technically correct, I don't see a problem exposing the entire service to the view by attaching it directly to the scope. However this depends on the complexity of your project, and the design of your services.

For example, most services relating to reusable view states I write are simply a set of functions, with one exposing the underlying data.

return {    getData: function() { return container; },    doSomethingOnData: function() { /* some manipulation of container */ }};

Now you can access the service data by attaching it simply to a $scope variable:

$scope.serviceData = MyService.getData();

So your options for accessing service functions are either to go with Whizkids answer and create wrapping functions attached to scope, or to expose the service directly to the view.

$scope.$MyService = MyService;

To which you could do something like:

<div ng-click="$MyService.doSomethingOnData()"></div>

While this practice strictly goes against angulars separation principles, it does make the code concise if you have a lot of functions within your service you need to expose with simple wrappers.