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

Question

When calling a function like this:

HTML:

<select ng-model="var" ng-change="myFunction(var)">
  <option ng-repeat="option in alloptions">{{option}}</option>
</select>

JS:

$scope.myFunction = function(){//do things}

it all works perfectly but when my function is within a service (which can be reached by the controller) the function doesn't get called. calling it by putting the service name as a prefix is also not an option (even though this works within javascript code itself) myService.myFunction(var)

So my question: what is the proper way to call services in ng-change when they are located in a service?

thanks in advance

Answer 1

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.

Answer 2

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.