Using jquery data table in angular js & MVC

MVC code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public JsonResult Gets()
        {
            List<EMP> lst1 = new List<EMP>() {
                 new EMP { DID=1, NAME="A",EID=1 },
                 new EMP { DID=1, NAME="B",EID=2 },
                 new EMP { DID=2, NAME="C" ,EID=3},
                 new EMP { DID=2, NAME="D" ,EID=4},
                 new EMP { DID=3, NAME="E" ,EID=5},
                 new EMP { DID=3, NAME="F" ,EID=6}
            };
            return Json(lst1.ToList(), JsonRequestBehavior.AllowGet);

        }
       public class EMP
        {
            public int EID { get; set; }
            public string NAME { get; set; }
            public int DID { get; set; }
        }
    }
}

View Code :


@{
    ViewBag.Title = "Index";
    Layout = null;
}

<h2></h2>
<style>
    .TBL{
    border:solid 1px #000000;
    height:auto;
    width:auto
    }
</style>
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables_themeroller.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
<script type="text/javascript" src="~/Scripts/angular-datatables.js"></script>
<div class="container" ng-app="app" ng-controller="Ctrl" style="margin-top:20px">
    <div class="TBL">
        <table id="entry-grid" datatable="" dt-options="dtOps" dt-columns="dtCol" class="table table-bordered table-hover table-condensed table-responsive table-striped"></table>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('app', ['datatables']);
    app.controller('Ctrl',
        function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
            $scope.dtCol = [
                DTColumnBuilder.newColumn("EID", "EID"),
                DTColumnBuilder.newColumn("NAME", "NAME"),
                DTColumnBuilder.newColumn("DID", "DID")
            ]
            $scope.dtOps = DTOptionsBuilder.newOptions().withOption('ajax', {
                url: "/Test/Gets",
                type: "Get"
            })
            .withPaginationType('full_numbers')
            .withDisplayLength(10);
        });

 
</script>