Sorting is not working in angular

See more:

jQuery

MVC4

AngularJs

I am new to Angular. I am trying to create a table and try to apply sorting as below

My Module Code :

app.js :

(function () {
    myModule = angular.module('myAngularApplication', []);
}());

LeadService.js :

angular.module('myAngularApplication').service("LeadService", function ($http) {
    this.getAllLeads = function () { return $http.get("/Student/GetLeads"); };
});

StudentController.js :

angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {

    $scope.leads = [];
    $scope.sortType = 'StudentName'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $scope.searchFish = '';
    GetAllLeads();

    function GetAllLeads() {
          $scope.leads = LeadService.getAllLeads();
                $scope.leads = [
                        { ID: 0, StudentName: "Test Books 1", Source: "Test Author 1", Course: "TEST1" },
                        { ID: 1, StudentName: "Test Books 2", Source: "Test Author 2", Course: "TEST2" },
                        { ID: 2, StudentName: "Test Books 332", Source: "Test Author 3", Course: "TEST3" },
                        { ID: 4, StudentName: "Test Books 4", Source: "Test Author 4", Course: "TEST4" },
                        { ID: 5, StudentName: "Test Books 5", Source: "Test Author 5", Course: "TEST5" }
                    ];<small><small></small></small>

    }

});

My View : (Its an .cshtml page as i am using MVC)

@*<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>*@

<script src="../../libs/angular.min.js" type="text/javascript"></script>
<script src="../../app/app.js" type="text/javascript"></script>
<script src="../../app/Student/LeadService.js" type="text/javascript"></script>
<script src="../../app/Student/StudentController.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
<div ng-app="myAngularApplication" ng-controller="StudentController">

<section class="content">
      
          <div class="box"><pre lang="text"><pre lang="text">
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped" ng-init="GetAllLeads()">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Student Name</th>
                        <th>Source</th>
                        <th>Course</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr  ng-repeat="lead in leads">
                        <td>{{lead.ID}}</td>
                        <td>{{lead.StudentName}}</td>
                        <td>{{lead.Source}}</td>
                        <td>{{lead.Course}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
</div></section>

 <script type="text/javascript">
     $(function () {
         $("#example1").DataTable();
         $('#example2').DataTable({
             "paging": true,
             "lengthChange": false,
             "searching": false,
             "ordering": true,
             "info": true,
             "autoWidth": false
         });
     });
    </script>

This code woks fine (all sorting and filter but when i fetch data from a controller then sorting and Filter does not work.

My Action in Controller is

public JsonResult GetLeads()
        {
            List<lead> leadList = new List<lead>();

            for (int i = 0; i < 3; i++)
            {
                Lead obj1 = new Lead();
                obj1.ID = i;
                obj1.StudentName = "Vijay";
                obj1.Source = "Source" + i;
                obj1.Course = "cource" + i;
                leadList.Add(obj1);
            }
          

            return Json(leadList.ToArray(), JsonRequestBehavior.AllowGet);
        }

and i changed my controller as below

angular.module('myAngularApplication').controller('StudentController', function ($scope, LeadService) {

    $scope.leads = [];
    $scope.sortType = 'StudentName'; // set the default sort type
    $scope.sortReverse = false;  // set the default sort order
    $scope.searchFish = '';
    GetAllLeads();

    function GetAllLeads() {
        var getData = LeadService.getAllLeads();
        getData.then(function (l) {
           // $scope.leads = l.data; // I tried this also
            for (i = 0; i < l.data.length; i++) {
                $scope.leads[i] = { ID: l.data[i].ID, StudentName: l.data[i].StudentName, Source: l.data[i].Source, Course: l.data[i].Course }
            }
        }, function () {
            alert('Error in getting records');
        });

    }

});

Initially it loads data as expected

For Sorting and Filter i am using

<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>

My Question is this. Why this is working with dummy data and why its not working with actual data (returning from Controller). What i need to change to make this work. This can be a silly question but any help will be appreciate.

What I have tried:

I tried to change the Angular Js version.