Angular datatables - With options ordering

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0-rc1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
  <script data-require="bootstrap@3.0.0-rc1" data-semver="3.0.0-rc1" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    
</head>

<body ng-app="datatablesSampleApp">
    <div ng-controller="sampleCtrl">
        <table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumns" dt-instance="dtInstance">
            <thead>
              <tr>
                <th>
                  Icon
                  <i ng-click="showFavoriteOnly(); $event.stopPropagation();" class="fa" ng-class="{'fa-star-o': !showFavorites, 'fa-star': showFavorites,}"></i>
                </th>
                <th>Prop1</th>
                <th>Prop2</th>
              </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in items">
                    <td><i ng-class="item.icon"></i></td>
                    <td>{{item.prop1}}</td>
                    <td>{{item.prop2}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
    <script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

(function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
    controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnDefBuilder) {
       $scope.showFavorites = false;
       
       $scope.showFavoriteOnly = function () {
         $scope.showFavorites = !$scope.showFavorites;
        };
       
       $scope.dtColumns = [
           DTColumnDefBuilder.newColumnDef(0).withOption('orderDataType', 'fa-classes'),
           DTColumnDefBuilder.newColumnDef(1),
           DTColumnDefBuilder.newColumnDef(2)
       ];  
       
       $scope.items = [{icon: "fa fa-star", prop1: "foo", prop2: "bar"},
       {icon: "fa fa-star-o", prop1: "know", prop2: "def"},
       {icon: "fa fa-star", prop1: "not know", prop2: "mar"}];

       $scope.dtOptions = DTOptionsBuilder.newOptions()
          .withPaginationType('full_numbers');
       
       $scope.dtInstance = {}
       
       $scope.$watch("showFavorites", function (newVal, oldVal) {
                if (oldVal != newVal && oldVal !== undefined) {
                    if (newVal) {
                        $.fn.dataTable.ext.search.push(
                            function (settings, searchData, index, rowData, counter) {
                                return $(rowData[0]).hasClass('fa-star');
                            }
                        );
                        $scope.dtInstance.DataTable.draw();
                    } else {
                        $.fn.dataTable.ext.search.pop();
                        $scope.dtInstance.DataTable.draw();
                    }
                }
            });
       
       $.fn.dataTable.ext.order['fa-classes'] = function (settings, col) {
                return this.api().column(col, {order: 'index'}).nodes().map(function (td, i) {
                    return $('i', td).hasClass('fa-star-o') ? '1' : '0';
                })
            };
       
    });
})(angular);