Add in Hash and update DOM element dynamically using ng-repeat - angularjs

Question

I have hash of users as the following:
{"A1": {name: "Demo-1", status: "active"}, "A2": {name: "Demo-2", status: "deactive"}};
And I have two hashes of active/deactive users, and I make the table of each of them as the following:
<tr ng-repeat="(id, user) in deactiveUsers">
<td>
{{ user.name }}
</td>
<td>
<button type="button" ng-click="change(id)">Active</button>
</td>
</tr>
And If I click on Active button, I remove the object from deactiveUsers, and add it in activeUsers, the change function as the following:
$scope.change = function(id){
if($scope.users[id].status == "active"){
delete $scope.activeUsers[id];
$scope.users[id].status = "deactive";
$scope.deactiveUsers[id] = $scope.users[id];
}else{
delete $scope.deactiveUsers[id];
$scope.users[id].status = "active";
$scope.activeUsers[id] = $scope.users[id];
}
}
This my demo, it's working well if I tried it on plnkr. But on my localhost the deleting only is working, when I add on activeUsers the DOM element doesn't update with the new record.
I can't find out the issue.
How can I add in Hash to update the DOM element dynamically ?
why it's working on plnkr, but the same code doesn't work on localhost ?

Answer 1

You have multiple body tags in your DOM. I think the first (after the first table element) cause the others angular directives are outside the app.
Replace the body in your table elements by tbody elements.
Edit By the question's owner
My Error was I developed the tables as the following:
<div class="panel panel-primary" ng-controller="ExampleCtrl">
<table></table>
</div>
<div class="panel panel-primary" ng-controller="ExampleCtrl">
<table></table>
</div>
So, I called ng-controller twice, I fixed it by develop one div for the both as the following:
<div ng-controller="ExampleCtrl">
<div class="panel panel-primary">
<table></table>
</div>
<div class="panel panel-primary">
<table></table>
</div>
</div>