Angular doesn't refresh the table after adding new item - angularjs

Question

When i get GetAll(); angular function to refresh the table it called Because i get the alert message but it doesn't refresh the table.
I am new in AngularJS and i don't know how to solve that problem
Please help me
Here is my code:
[HttpGet]
public JsonResult GetAllContinents()
{
MyDatabaseEntities db = new MyDatabaseEntities();
var Result = (from con in db.Continents select new { ContinentId = con.ContinentId, ContinentName = con.ContinentName.Trim() }).ToList();
return Json(Result, JsonRequestBehavior.AllowGet);
}
HTML:
<div data-ng-controller="myCntrl">
<div class="col-md-12">
<table class="table table-bordered table-hover" style="width:800px">
<thead>
<tr>
<th><b></b>ID<b></b></th>
<th>continent Name</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="con in ContinentsList">
<td>{{con.ContinentId}}</td>
<td>{{con.ContinentName}}</td>
<td>
<button class="btn btn-md glyphicon glyphicon-trash"
title="Click here to delete record" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div data-ng-controller="myCntrl">
Enter Continent Name: <input type="text" ng-model="Continent.ContinentName" />
<input type="button" value="Add" ng-click="AddContinent()" />
</div>
AngularJs:
app.controller("myCntrl", function ($scope, $http, angularService) {
$scope.GetAll = function () {
$scope.ContinentsList = [];
$http.get('/Home/GetAllContinents')
.success(function (data) {
$scope.ContinentsList = data;
alert('Done!')
})
.error(function (msg) {
alert(msg);
})
};
$scope.GetAll();
$scope.AddContinent = function () {
$http.post('/Home/AddContinent', { Con: $scope.Continent })
.success(function (data) {
$scope.clear();
$scope.GetAll();
})
.error(function (msg) {
alert(msg)
})
};`enter code here`
Thank you in advance

Answer 1

You have to define the Continental ist ouside the function scope.
$scope.ContinentsList = [];
function getAll () {
$http.get('/Home/GetAllContinents')
.success(function (data) {
$scope.ContinentsList = data;
alert('Done!')
})
.error(function (msg) {
alert(msg);
})
};

Answer 2

Remove ng-controller from :
<div data-ng-controller="myCntrl">
Enter Continent Name: <input type="text" ng-model="Continent.ContinentName" />
<input type="button" value="Add" ng-click="AddContinent()" />
</div>
Now you have two scope and two lists of content and it's problem. In one scope you have a list that you show on view and in second scope you add elements and try refresh lists.
This is working code:
<div data-ng-controller="myCntrl">
<div class="col-md-12">
<table class="table table-bordered table-hover" style="width:800px">
<thead>
<tr>
<th><b></b>ID<b></b></th>
<th>continent Name</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="con in ContinentsList">
<td>{{con.ContinentId}}</td>
<td>{{con.ContinentName}}</td>
<td>
<button class="btn btn-md glyphicon glyphicon-trash"
title="Click here to delete record" />
</td>
</tr>
</tbody>
</table>
</div>
Enter Continent Name: <input type="text" ng-model="Continent.ContinentName" />
<input type="button" value="Add" ng-click="AddContinent()" />
</div>