Mixitup Angular.js directive (Angular.js watch doesn't work)

Question

I need to integrate Angular.js with Mixitup, so I created directive like that

this is JSFiddle to my code: http://jsfiddle.net/zn7t9p6L/19/

var app = angular.module('app', []);

app.directive('mixitup',function(){
    var linker = function(scope,element,attrs) {
        scope.$watch('entities', function(){
            console.log('reload');
            element.mixItUp();
            // how to tell mixitup to reload the data
        });
        console.log('starting')
    };
    
    return {
        restrict:'A',
        link: linker,
        scope:{entities:'='}
    }
})

app.controller('DrawingsController',

function DrawingsController($scope, $timeout) {
    $scope.categories = ['Soft', 'Elements'];

    $scope.drawings = [{
        name: 'Water',
        category: 'Elements',
        value: '2'
    }, {
        name: 'Fire',
        category: 'Elements',
        value: '1'
    }, {
        name: 'Air',
        category: 'Elements',
        value: '4'
    }, {
        name: 'Coton',
        category: 'Soft',
        value: '3'
    }, {
        name: 'Whool',
        category: 'Soft',
        value: '5'
    }];
    
    $scope.add = function(){
         $scope.drawings.push({name:'new soft',value:$scope.drawings.length,category:'Soft'})
        console.dir($scope.drawings);
    };
});

<script src="http://cdn.jsdelivr.net/jquery.mixitup/2.0.4/jquery.mixitup.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<div ng-controller="DrawingsController">
    
    <div class="controls">
        <label>Filter:</label>
        <button class="filter" data-filter="all">All</button>
        <button class="filter" 
                data-filter=".category-{{category}}" 
                ng-repeat="category in categories">{{category}}</button>
        
        <label>Sort:</label>
        <button class="sort" data-sort="myorder:asc">Asc</button>
        <button class="sort" data-sort="myorder:desc">Desc</button>
        
        <label>Add:</label>
        <button data-ng-click="add()">Add</button>
    </div>
    
    <div mixitup='mixitup' class="container" entities='drawings'>
        <div    class="mix category-{{drawing.category}}" 
                data-myorder="{{drawing.value}}" 
                ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
    </div>
</div>

My problem is when I try to add new element to the drawings array or even change the array, it doesn't reflect the changes immediately, you need to make some filters like sorting to reflect changes.

Also the watcher to "entities" work once at the beginning and doesn't work anymore when any changes happen later to the drawings array (it will print reload one time and will not print it anymore) you can try it in jsfiddle

Answer 1

You can try to pass a 3rd argument to .$watch() as true.

http://docs.angularjs.org/api/ng.$rootScope.Scope

$watch(watchExpression, listener, objectEquality)

objectEquality(optional) – {boolean=} – Comparing the object for equality rather than for reference.