如何让Angular.js和Mixitup.js一起工作

Question

有一个很好的啧啧说明了如何实现这一目标，但我似乎无法做到这一点。这是example，这里是my。甚至更奇怪我在控制台中没有出现任何错误。

以下是本地项目的HTML。

 <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>
       </div>
  <div class="test">
        <div id="MixItUpContainer1" class="container">
             <div class="mix category-{{drawing.category}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
        </div>
  </div>

                <div class="gap"></div>
                <div class="gap"></div>
 </div> <!-- end of DrawingsController -->

JS：

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

$scope.drawings = [{
    category: 'Elements',
    value: '1',
    source: 'http://placehold.it/350x150'
}, {
    category: 'Elements',
    value: '1',
    source: 'http://placehold.it/350x150'
}, {
    category: 'Elements',
    value: '2',
    source: 'http://placehold.it/350x150'
}, {
    category: 'Soft',
    value: '2',
    source: 'http://placehold.it/350x150'
}, {
    category: 'Soft',
    value: '3',
    source: 'http://placehold.it/350x150'
}];
});