AngularJS - RestAngular - after post add new category, update category list in other controller

Question

what is the best way to update a list of categories (in a nav for example) after adding a category with a different controller?
Here is my code

// add new category
app.controller('AddCategoryController', ['$scope', 'CategoryService', function($scope, CategoryService) {

  $scope.category = {};

  $scope.added = false;

  $scope.addCategory = function() {
    CategoryService.addCategory($scope.category).then(function(response) {
        if(response == 'ok') {
            $scope.added = true;
        }
    });
  };
}]);

and here is the controller for showing the categories

app.controller('CategoriesController', ['$scope', 'CategoryService', function($scope, CategoryService) {
  CategoryService.getCategories().then(function(categories) {
    $scope.categories = categories;
  });
}]);

Categories are shown in a nav

<nav>
  <div class="list-group" ng-controller="CategoriesController">
    <a ng-href="#category/{{category.id}}" class="list-group-item" ng-repeat="category in categories" ng-bind="category.name"></a>
  </div>

  <div class="list-group">
    <a href="#add-category" class="list-group-item">Add category</a>
  </div>
</nav>

EDIT This is the service

services.factory('CategoryService', ['$route', 'Restangular', function($route, Restangular) {
  var Category = Restangular.all('categories');

  return {
    getCategories: function() {
        return Category.getList();
    },
    getCategory: function(id) {
        id = id ? id : $route.current.params.categoryId;
        return Category.get(id);
    },
    addCategory: function(category) {
        return Category.post(category);
    },
    editCategory: function(category) {
        return category.put()
    },
    removeCategory: function(id) {
        id = id ? id : $route.current.params.categoryId;
        return Category.remove(id);
    }
  };
}]);

Answer 1

Services are singleton in AngularJS. Therefore, after you called CategoryService.addCategory you can update the category list in your service and it will be available for other controllers.

You can also enrich your service to cache the categories. This will help you to avoid unnecessary requests to your backend.

Either you build your own caching logic or use:

RestangularProvider.setDefaultHttpFields({cache: true});

In addition you can use $rootScope.$on and $rootScope.$emit to receive and send events. This helps you to communicate between components in real-time fashion.

 // send event
$rootScope.$emit(nameOfEvent, args...);

In some other controller/ service

// subscription
var unbind = $rootScope.$on(nameOfEvent, function(event, args...) { /* do stuff */ });

// don't forget to unbind
$scope.$on('$destroy', function() { 
  unbind(); 
});