Refresh a table on pushing value into array - angularjs

Question

I am trying to display a table with data from an array in the controller. The html has a few input fields and on clicking submit I store the values in the input fields to the array. I then want to display the values in the table. I use ng-repeat on the tr.
I want the table to refresh and show the nwe data in the array. I am new to angularjs and I think the table should automatically show the new data because of ng-repeat. I'm not sure. If not, how do I refresh the table to show the new values.
But I think the problem is not that, because I added a few values to the array before pushing from the input fields, but the table still doesn't show my hard-coded array data.
The html(the table with ng-repeat is at the bottom and ng-controller at the top ):
<div class="content rows" ng-controller="mainController" >
<div class="navigationClass col-md-2"> <!-- Navigation DIv-->
<ul class="navColor nav nav-pills nav-stacked">
<li ><a style="color:#ffffff" href="#">Masters</a></li>
<li >Transactions</li>
<li ><a style="color:#ffffff" href="#">Reports</a></li>
<li ><a style="color:#ffffff" href="#">Devices</a></li>
<li class="active"><a style="color:#ffffff" href="#">Employees</a></li>
<li ><a style="color:#ffffff" href="#">Dashboard</a></li>
<li ><a style="color:#ffffff" href="#">Vendors</a></li>
</ul>
</div>
<div class="middle col-md-9 borderClass">
<div class="middle-header borderClass" style="padding-top:15px;padding-bottom:5px;">
<p style="text-align:center;color:#ffffff;">
Employee Registeration
</p>
</div>
<div class="">
<div class="createNewEmployee row" style="padding:5px;">
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<label class="marginClass" for="empId">Enter Employee ID</label>
<input ng-model="employeeID" type="text" id="empId" class="form-control marginClass" placeholder="Employee ID" name="">
<label for="empName" class="marginClass">Enter Employee name</label>
<input ng-model="employeeName" type="text" class="form-control marginClass" placeholder="Employee name" name="">
<label for="empCard" class="marginClass">Enter employee card number</label>
<input ng-model="employeeCardNumber" type="text" id="empCard" class="form-control marginClass" placeholder="Card number" name="">
<label for="doj" class="marginClass">Select employee DOJ</label>
<input ng-model="scopeDoj" type="text" id="doj" class="form-control marginClass" placeholder="DOJ" name="">
</div>
<div class="emptyDiv col-md-1"></div>
<div class="col-md-4">
<div class="form-group">
<label class="marginClass" for="categoryDropdown">Select category</label>
<select ng-model="employeeCategory" class="form-control marginClass" id="categoryDropdown">
<option>Company employee</option>
<option>Contract workman</option>
<option>Manager</option>
</select>
</div>
<div class="form-group">
<label class="marginClass" for="departmentDropdown">Select deparment</label>
<select ng-model="employeeDepartment" class="form-control marginClass" id="departmentDropdown">
<option>Pulp mill(Operation)</option>
<option>Stock preparation</option>
<option>Paper machine(Operation)</option>
<option>Finishing house</option>
<option>Paper machine(O)-V</option>
<option>SFT Street-C</option>
</select>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model="activeOrInactive"
ng-true-value="'active'"
ng-false-value="'inactive'"
name="fancy-checkbox-default" id="activeID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="activeID">
Employee active
</label>
</div>
</div>
<div class="[ form-group ]" style="margin:5px; margin-top:25px;">
<input type="checkbox"
ng-model = "fingerprintActiveOrInactive"
ng-true-value="'fingeractive'"
ng-false-value="'fingerinactive'"
style="" name="fancy-checkbox-default" id="fingerprintActiveID" autocomplete="off" />
<div class="[ btn-group ]">
<label class="" for="fingerprintActiveID">
Fingerprint bio status active
</label>
</div>
</div>
</div>
<div class="emptyDiv col-md-2">
</div>
</div>
<p style="text-align:center"><button ng-click="addNewEmployee()" class="btn btn-primary">Submit</button></p>
</div>
<form class="form-inline" style="margin:20px;">
<div class="searchEmployee">
<div class="form-group">
<p>
<label class="marginClass" for="searchBox">Search employee</label>
<input id="searchBox" type="text" class="form-control" placeholder="Type here to search" name="">
</p>
</div>
</div>
</form>
<div class = "theTable" style="border:1px thin #ff0000;">
<table class="table table-hover table-bordered" style="margin-bottom:1px;">
<thead>
<th>Employee ID</th>
<th>Employee name</th>
<th>Card number</th>
<th>DOJ</th>
<th>Department</th>
<th>Category</th>
<th>Status</th>
<th>Edit/Delete</th>
</thead>
<tbody>
<tr ng-repeat="employee in newEmployeeArray">
<td>{{employee.empid}}</td>
<td>{{employee.empname}}</td>
<td>{{employee.empcardnumber}}</td>
<td>{{employee.doj}}</td>
<td>{{employee.empcategory}}</td>
<td>{{employee.empdepartment}}</td>
<td>{{employee.empactive}}</td>
<td>{{employee.empfingerprint}}</td>
<td><a title="Edit" href="#" style="text-align:center;text-decoration:none">
<span class="glyphicon glyphicon-pencil"></span></a><a title="Edit" href="#">
<span title="Delete" class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The controller:
var app = angular.module('itc-app', ['ngRoute']);
app.controller('mainController',function($scope,$route,$timeout){
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.employeeCategory="Company employee";
$scope.employeeDepartment="Pulp mill(Operation)";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
// $scope.newEmployeeScopeArray;
var newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
$scope.addNewEmployee = function(){
$timeout(function(){
newEmployeeArray.push({
empid:$scope.employeeID,
empname:$scope.employeeName,
empcardnumber:$scope.employeeCardNumber,
doj:$scope.scopeDoj,
empcategory:$scope.employeeCategory,
empdepartment:$scope.employeeDepartment,
empactive:$scope.activeOrInactive,
empfingerprint:$scope.fingerprintActiveOrInactive,
empty:''
});
// $route.reload();
$scope.employeeID="";
$scope.employeeName="";
$scope.employeeCardNumber="";
$scope.scopeDoj="";
$scope.activeOrInactive="inactive";
$scope.fingerprintActiveOrInactive = "fingerinactive";
console.log(newEmployeeArray);
},1000);
}
})

Answer 1

You just forgot to add newEmployeeArrayto your controllers $scope. When you do that, than pushing a new entry to that array will automatically update your view via ng-repeat.

Answer 2

newEmplyoeeArray is not visible from the $scope. You need to write
$scope.newEmployeeArray = [
{
empid:'a',empname:'a',empcardnumber:'',doj:'',
empcategory:'',empdepartment:'',empactive:'',
empdepartment:'',empactive:'',empfingerprint:'',
empty:''
}
];
instead of var newEmployeeArray.

Answer 3

Two things:
1) Please use the $scope for newEmployeeArray ($scope.newEmployeearray = .....)
Only the variable in the scope are watched for changes. That's the reason your view is not getting updated when the array is updated
2) You don't need to put the newEmployeeArray.push... inside the $timeout. $timeout would wait for the cycle to be completed and then push which would again change the scope and start a new cycle. This would hamper the performance.