Hej. Chciałbym zaimplementować Angular Data Table w swoim projekcie.

jak tutaj:
https://l-lin.github.io/angular-datatables/#/angularWay

Mam web api które ciągnie mi dane z bazy poprzez Service

 
app.service('crudService', function ($http) {

    //Get single product
    this.getOneProduct = function (prodID) {
        return $http.get("/api/values/:" + prodID);
    }

    //Get All products
    this.getAllProducts = function () {
        return $http.get("/api/values");
    }
});

Modules:

 
var app;
(function () {
    app = angular.module("crudModule", []);
})();

var app2;
(function () {
    app2 = angular.module("crudModule2", []);
})();

var app3;
(function () {
    app3 = angular.module("showcase.crudModule3", ['datatables', 'ngResource']);
})();

I controllers:

 
app.controller('crudController', function ($scope, crudService) {

    loadRecords();

    //Function to load all products records
    function loadRecords() {
        var promiseGet = crudService.getAllProducts(); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Products = pl.data },
              function (errorPl) {
                  $log.error('failure loading products', errorPl);
              });
    }

    //Clear the Scope models
    $scope.clear = function () {
        $scope.ProductID = 0;
        $scope.ProductName = "";
        $scope.QuantityPerUnit = 0;
        $scope.UnitPrice = 0;
        $scope.UnitsInStock = 0;
    }
});

app2.controller('crudController2', function ($scope, crudService, $routeParams) {

    var productID = $routeParams.ProductID; // get productID from URL


    loadOneRecord(productID);

    //Function to load one record
    function loadOneRecord(productID) {
        var promiseGet = crudService.getOneProduct(productID); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Products = pl.data },
              function (errorPl) {
                  $log.error('failure loading products', errorPl);
              });
    }


    //Clear the Scope models
    $scope.clear = function () {
        $scope.ProductID = 0;
        $scope.ProductName = "";
        $scope.QuantityPerUnit = 0;
        $scope.UnitPrice = 0;
        $scope.UnitsInStock = 0;
    }
});

app3.controller('crudController3', function ($scope, crudService) {

    loadRecords();
    AngularWayCtrl();

    //Function to load all products records
    function loadRecords() {
        var promiseGet = crudService.getAllProducts(); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Products = pl.data },
              function (errorPl) {
                  $log.error('failure loading products', errorPl);
              });
    }

    function AngularWayCtrl($resource, crudService) {
        var promiseGet = crudService.getAllProducts();
        var vm = this;
        promiseGet.$promise.then(function (Products) {
            vm.Products = Products;
        });
    }
    //Clear the Scope models
    $scope.clear = function () {
        $scope.ProductID = 0;
        $scope.ProductName = "";
        $scope.QuantityPerUnit = 0;
        $scope.UnitPrice = 0;
        $scope.UnitsInStock = 0;
    }
});

W widoku po stronie ASp .NET

 
@{
    ViewBag.Title = "DisplayAngular";
}

@section scripts{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/Custom/Module.js"></script>
    <script src="~/Scripts/Custom/Service.js"></script>
    <script src="~/Scripts/Custom/Controller.js"></script>

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

}


<html ng-app="crudModule3">
@{
    ViewBag.Title = "Index";
}

<h2>Angular Data Table</h2>
<body>
    <div ng-controller="crudController3 as showcase">
        <table datatable="ng" class="row-border hover" cellspacing="20px" cellpadding="20px">
            <thead>
                <tr>
                    <th>ProductID</th>
                    <th>ProductName</th>
                    <th>QuantityPerUnit</th>
                    <th>UnitPrice</th>
                    <th>UnitsInStock</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="prod in showcase.Products">
                    <td> <span>{{prod.ProductID}}</span></td>
                    <td> <span>{{prod.ProductName}}</span></td>
                    <td> <span>{{prod.QuantityPerUnit}}</span></td>
                    <td> <span>{{prod.UnitPrice}}</span></td>
                    <td> <span>{{prod.UnitsInStock}}</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Nie wiem co robię źle. Jak to zaimplementować ?