AngularJs Sort Table on already inserted data - asp.net-mvc

Question

I've been trying to sort table data on click (ng-click if i use angularJS)
I'm getting data from database.I only need Sort functionality, if it happens through angularJs I would be very happy
Here it is what i did till now, I haven't done much as I'm new to AngularJS
#model WebApplication3.Models.StudentModel
#{
ViewBag.Title = "Index";
}
<h2>Students</h2>
<div><button class="create btn btn-success"><span class="glyphicon glyphicon-plus"></span> Create New</button></div>
<br/>
<table class="table" ng-app="StudentApp">
<tbody ng-controller="StudentCtrl">
<tr>
<th>Key</th>
<th ng-click="">First Name</th>
<th ng-click="">Last Name</th>
<th>Profile picture</th>
<th>Options</th>
</tr>
#foreach (var student in Model._StudentList)
{
<tr>
<td>#student.StudentID</td>
<td>#student.FirstName</td>
<td>#student.LastName</td>
<td>
<a class="example-image-link" href="~/Images/#student.PhotoURL" data-lightbox="example-set" data-title="#student.FirstName #student.LastName profile Picture"><img class="example-image" width="60" height="40" src="~/Images/#student.PhotoURL" alt="" /></a>
</td>
<td>
<span class="glyphicon glyphicon-pencil img-rotate" title="Edit"></span>
<span class="glyphicon glyphicon-exclamation-sign img-rotate" title="Infomation"></span>
<span class="glyphicon glyphicon-remove img-rotate" title="Remove"></span>
</td>
</tr>
}
</tbody>
</table>
I need to sort firstName, LastName when they click on respective th tag
Thanks

Answer 1

There is a sort table filter in AngularJS, which his name is OrderBy (documentation)
Currently, you cannot use that with your code, because OrderBy filter only works if AngularJS writes himself the table.
Example :
<table class="friend">
<tr>
<th>
Name
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Phone Number
<span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Age
<span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
In your case, the table is written in the view, and I think the only way to do it now with your code, is using a jQuery plugin.
Sadly, you loose the power of AngularJS...
Solution :
A solution would be to use ng-init attribute :
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
And you can use names variable in your controller, like :
console.log($scope.names); // Display the names

Answer 2

oh thats so sad, can i bind my MVC Model data to AngularJs
I mean like we bind JSON data
var app = angular.module('studentApp', []);
app.controller('StudntCtrl', function($scope, $http) {
htp.get('Student.json').success(function(data){
$scope.People = data;
});
});
like wise can i bind MVC model data to $scope.People ???