resolving business treatment in service with ngResource

I have an AngularJs application working with components and several modules. I created a plunker example to present my problem here.

I have my NavbarComponent where I declared my Controller where I inject my service called NavbarService. In the NavbarService, I inject a factory resource to make my Rest call, once this call is made I'm trying to made some treatment on the response before returning it back to the controller, in this example I just apply a simple filter on it, but it doesn't work. If I omit my treatment and return only the categories, the code works and you can visualize a list of two.

I can make my treatment in the controller but this is a bad practice 'cause I believe it should be done in the Service, secondly since it's an asynchronous response I must do something like this to make it work, which is really really ugly:

    navbarService.getCategories().$promise.then(function (response) {
                console.log("controller", response[0].category);
                vm.categories = categoryFilter(response[0].category);
            }, function (error) {
               console.log("an error occured");
            });

Can someone please guide me through this, I'm out of solutions. Thank you

Another simple way is to pass a callback function to service from you component like this

 'use strict';

angular.module('navbar').component('appNavbar', {
     templateUrl: "navbar.template.html",
     controller: [ 'navbarService', function appNavbarController(navbarService) {
         var vm = this; 
         navbarService.getCategories(function(data){
             // this will be called when service will get the response and filter function has filtered the response
             vm.categories = data;
         });
      }]
}); 

Now service should be like this

 'use strict';

angular.module('navbar').service('navbarService', ['categoryResourceService', 'categoryFilter', function(categoryResourceService, categoryFilter) {
var vm = this;
vm.getCategories = function(callback) {
  categoryResourceService.query(function(response) {
    console.log("[NavbarService] response:", response);
    callback(categoryFilter(response));
  }, function(error) {
    console.log("[NavbarService] error:", error);
  });
  //return vm.categories;  
}

}]);

Filter will be like this

  'use strict';

  angular.module('navbar').filter('category', function() {
   return function(categories) {
    var categoryIds = ['World'];
    var result = [];
     angular.forEach(categoryIds, function (categoryId) {
     angular.forEach(categories, function (category) {
          if (category.name == categoryId) { 
             console.log("Match"); 
             result.push(category);
          }
      });
    });
   return result;
  };
});