How can I change value of angular object used in HTML? - html

Question

I need to change a value in HTML using Angular click. The value is getting changed in the angular function but it is not reflecting in HTML.
My Angularjs and HTML is like :-
$scope.GetTblData = function (Name) {
var Data = $.param({ TblName: Name });
var MyTblDataList = [];
$scope.TempName = '';
$scope.TempName = Name;
if (Name == 'ContactTbl') {
$('#ContactTbl').show();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').show();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseDescTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').show();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'CourseSubDesc') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').show();
$('#InternTbl').hide();
$('#LocationTbl').hide();
}
else if (Name == 'InternTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').show();
$('#LocationTbl').hide();
}
else if (Name == 'LocationTbl') {
$('#ContactTbl').hide();
$('#CourseTbl').hide();
$('#CourseDescTbl').hide();
$('#CourseSubDescTbl').hide();
$('#InternTbl').hide();
$('#LocationTbl').show();
}
$http({
url: '/Admin/FetchTblData',
method: 'POST',
data: Data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
}).success(function (data) {
$scope.MyTblDataList = data;
}).error(function (data) {
alert('Cannot Load Table data')
});
}//GetTblData End
<li ng-repeat="r in MyTblList">
<a href="#" data-ng-click="GetTblData(r.TblName)">
<i class="glyphicon glyphicon-ok"></i>
{{r.TblName}}
</a>
</li>
<h2>{{TempName}} Details</h2>
<div class="table-responsive">
<table id="CourseTbl" class="table table-hover table-bordered" style="margin:0px 5px; width:1070px">
<thead style="background-color:aqua">
<tr>
<td>
S. No.
</td>
<td>
ID
</td>
<td>
Name
</td>
<td>
Description
</td>
<td>
Image
</td>
<td>
CourseLink
</td>
<td>
Action
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in MyTblDataList">
<td>
{{$index+1}}
</td>
<td>
{{r.ID}}
</td>
<td>
{{r.Name}}
</td>
<td>
{{r.Description}}
</td>
<td>
<img src="~/img/course-img/{{r.Img}}" height="200px" width="200px" />
#*{{r.Img}}*#
</td>
<td>
{{r.CourseLink}}
</td>
<td>
<div class="btn btn-group-xs">
<input type="button" class="btn btn-lg btn-info" ng-click="editItem(r.ID)" value="Edit" />
<input type="button" class="btn btn-xs btn-danger" value="Delete" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
But the problem is that on click of the anchor tag the value of $scope.TempName changes in Angularjs function but value of {{TempName}} doesn't change.