Вызов функции контроллера из директивы не обновляет область

Question

Я сделал директиву, используя сервис и $resource для поиска REST API и передачи результата в контроллер. Код выглядит так:

app.controller('productsCtrl', ['$scope', function ($scope) {
    var self = this;
    self.selection;

    self.searched = function (selected) {
        self.selection = selected;
    };
}]);

app.service('productsService', ['productsResource', function (productsResource) {
    var self = this;

    self.findProducts = function (search) {
        return productsResource.query({
            sku: search
        });
    };
}]);

app.factory('productsResource', ['$resource', function ($resource) {
    return $resource('products/:sku', {
        id: '@sku'
    });
}]);

app.directive('productSearch', ['productsService', function (productsService) {
    return {
        restrict: 'E',
        scope: {
            productSelected: '&'
        },
        templateUrl: '/products/product_search.html',
        link: function (scope) {
            scope.findProducts = function (search) {
                scope.searchResults = productsService.findProducts(search);
            };
            scope.selectResult = function (selected) {
                scope.selection = selected;
                scope.showResults = false;
            };
        }
    };
}]);

Соответствующие строки HTML:

<div ng-show='products.selection'>
    {{products.selection.name}}  //does not update
</div>

и из шаблона директив:

<div ng-click="productSelected({selected: selection})"></div>

Проблема в том, что моя модель не обновляется, когда директива вызывает метод контроллера (он покажет результаты последнего поиска). Для меня это имеет смысл, потому что здесь не вызывается "угловая" функция. Но как я должен заставить это работать. Я пробовал с $scope.$apply() но это выдает ошибку.

Как побочный вопрос. Правильно ли я это делаю? Это угловой путь? Особенно использование службы внутри директивы и передача вещей из директивы в контроллер?

РЕДАКТИРОВАТЬ: Это весь HTML-файл (с использованием controllerAs):

<div>
    <product-search product-selected='products.searched(selected)'></product-search>
    <div ng-show='products.selection'>
        {{products.selection.name}}
    </div>
</div>

Answer 1

Я думаю, что вы пропускаете обратный вызов из директивы. Вам может понадобиться добавить

scope.productSelected({selected: selection})

внутри функции scope.selectResult в директиве. Полный код будет выглядеть так

 scope.selectResult = function (selected) {
     scope.selection = selected;
     scope.showResults = false;
     scope.productSelected({selected: selected}); // add this
 };