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 ><a href="#" style="color:#ffffff">Transactions</a></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);

    }

})

```