How do I get Angular.js and Mixitup.js to work together

Question

There is a great tut which illustrates how to accomplish this, however I can't seem to get it right. Here is the example and here is my take on it. And even stranger I am not getting any errors in the console.

Here is the HTML from my project locally.

 <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'
}];
});