Angular datatables - The Angular way - Refresh data using jquery

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />

</head>

<body ng-app="datatablesSampleApp">
    <div ng-controller="simpleCtrl" class="code">
        <button ng-click="changePersons()">Change persons</button>
        <table datatable="ng">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                </tr>
            </thead>
            <tbody>
                <tr dt-rows ng-repeat="person in persons">
                    <td>{{ person.id }}</td>
                    <td>{{ person.firstName }}</td>
                    <td>{{ person.lastName }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.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 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('simpleCtrl', function($scope, DTColumnDefBuilder) {
        $scope.persons = [{
            "id": 860,
            "firstName": "Superman",
            "lastName": "Yoda"
        }, {
            "id": 870,
            "firstName": "Foo",
            "lastName": "Whateveryournameis"
        }, {
            "id": 590,
            "firstName": "Toto",
            "lastName": "Titi"
        }, {
            "id": 803,
            "firstName": "Luke",
            "lastName": "Kyle"
        }, {
            "id": 474,
            "firstName": "Toto",
            "lastName": "Bar"
        }, {
            "id": 476,
            "firstName": "Zed",
            "lastName": "Kyle"
        }];

        var dtId = '';

        $scope.changePersons = function() {
            $('#' + dtId).DataTable().destroy();
            $scope.persons = [{
                    "id": 111,
                    "firstName": "Superman",
                    "lastName": "Yoda"
                }, {
                    "id": 222,
                    "firstName": "Foo",
                    "lastName": "Whateveryournameis"
                }, {
                    "id": 333,
                    "firstName": "Toto",
                    "lastName": "Titi"
                }];
        };

        $scope.$on('event:dataTableLoaded', function(event, loadedDT) {
            dtId = loadedDT.id;
        });
    });
})(angular);