Change $scope not reflecting updates

Question

Well, I'm trying to filter the books by area. So far so good, I can get the values from BD, but the UI does not update.

HTML

<div class="col-lg-12" id="filter">
    <div class="row">
        <div class="col-lg-12" id="filter-title">
            <h3>Filters:</h3>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 filters" ng-repeat="area in areas">
            <div class="checkbox">
                <input type="checkbox" checkbox-group> {{area.desc}}
            </div>
        </div>
    </div>
</div>

Angular

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

    $scope.books = [];
    $scope.limit = 30;
    $scope.pagination = 0;
    $scope.array = [];

    // Search
    $http.get('config/all').success(function(data){
        if (data != 0) {
            $scope.books = data;
        }
        else {
            $scope.books = '';
        }
        // Number of pages
        $scope.pages = function(){
            return Math.ceil($scope.books.length / $scope.limit);
        }
    });

    // Search area
    $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 if checked
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.area.id);
                }
                // Remove if unchecked
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                $http.post('config/booksAreas', {"area" : scope.array}).success(function(data){
                    scope.books = data;
                    scope.pages = function(){
                        return Math.ceil(scope.books.length / scope.limite);
                    }
                });
            });
        });
    }
}

Same example in JsFiddle, but without ajax: http://jsfiddle.net/W295L/

Answer 1

i did it with a custom filter:

<input type="checkbox" data-ng-click="setSelected(area.id)" /> <!-- you can do this also with some button and style it with css if selected -->

and your booklist

<ul>
    <li ng-repeat="book in books | bookFilter:array">{{book.name}}</li>
</ul>

in your controller add the following method:

$scope.setSelected = function (id) {
    var idx = $scope.array.indexOf(id);
    if (idx > -1) {
        $scope.array.splice(idx, 1);
    } else {
        $scope.array.push(id);
    }
    console.log($scope.array);
    return false;
};

replace your directive through:

.filter('bookFilter', [function () {
    return function (books, selectedArea) {
        if (!angular.isUndefined(books) && !angular.isUndefined(selectedArea) && selectedArea.length > 0) {
            var tempBooks = [];
            angular.forEach(selectedArea, function (id) {
                angular.forEach(books, function (book) {
                    if (angular.equals(book.area, id)) {
                        tempBooks.push(book);
                    }
                });
            });
            return tempBooks;
        } else {
            return books;
        }
    };
}])

have a look in your updated fiddle