Angularjs Directive: $Scope does not update UI

Question

Well, I’m trying to filter the books according to the area the person selects. So far so good, I can get the values of the area and the bank, but the UI does not update the listing.

HTML

<div class="col-lg-12" id="filtros-acervo">
    <div class="row">
        <div class="col-lg-12" id="filtro-titulo">
            <h3>Filtros:</h3>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 filtros" ng-repeat="area in areas">
            <div class="checkbox">
                <input type="checkbox" checkbox-group> {{area.descricao}}
            </div>
        </div>
    </div>
</div>

Angular

app.controller('Acervo', function($scope,$http){

$scope.livros = []; // Cria um array vazio de livros
$scope.limite = 30; // Define o limite max de livros por pagina
$scope.paginacao = 0; // Paginacao começa do 0
$scope.array = []; // Cria um array vazio (vai servir no selecionar areas)

// Busca todos os livros
$http.get('config/all').success(function(data){
    if (data != 0) {
        $scope.livros = data;
    }
    else {
        $scope.livros = '';
    }
    // Retorna a quantidade de paginas necessarias
    $scope.paginas = function(){
        return Math.ceil($scope.livros.length / $scope.limite);
    }
});

// Busca todas as areas
$http.get('areas').success(function(areas){
    $scope.areas = areas;
});

})

Directive

.directive("checkboxGroup", function ($http) {
return {
    restrict: "A",
    link: function (scope, elem, attrs) {
        elem.bind('click', function () {
            scope.$apply(function () {
                var index = scope.array.indexOf(scope.area.id);
                // Add se marcado
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.area.id);
                }
                // Remove se desmarcado
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                $http.post('config/livrosAreas', {"area" : scope.array}).success(function(data){
                    scope.livros = data;
                    // Retorna a quantidade de paginas necessarias
                    scope.paginas = function(){
                        return Math.ceil(scope.livros.length / scope.limite);
                    }
                });
            });
        });
    }
}

The Bank gives me the return I want straight, just do not update the list of books.

Answer 1

The problem is in your Directive. When Angular updates the scope from your call on scope.$apply your ajax hasn’t finished running yet, so updates will only appear on the next change in scope. The correct thing would be to perform the ajax before updating the scope. This way your Directive changes to:

.directive("checkboxGroup", function ($http) {
return {
    restrict: "A",
    link: function (scope, elem, attrs) {
        elem.bind('click', function () {
                var index = scope.array.indexOf(scope.area.id);
                // Add se marcado
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.area.id);
                }
                // Remove se desmarcado
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                $http.post('config/livrosAreas', {"area" : scope.array}).success(function(data){
                    scope.livros = data;
                    // Retorna a quantidade de paginas necessarias
                    scope.paginas = function(){
                        return Math.ceil(scope.livros.length / scope.limite);
                    }
                }).then(function(){
                    scope.$apply();
                });
        });
    }
}