如何更改HTML中使用的角度对象的值？

Question

我需要使用Angular click更改HTML中的值。该值在角度函数中得到改变，但它没有反映在HTML中。 我的Angularjs和HTML就像： -

＆＃13;

＆＃13;

$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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但问题是，在点击锚标记时，$ scope.TempName的值在Angularjs函数中发生变化，但{{TempName}}的值不会发生变化。