bootstrap table is not working properly - angularjs

Question

ok, I have a issue with my bootstrap table. I have a Employee Modal with 2 tabs. The first tab is the table with the current Employees. When you select any Employee it takes you to the 2nd tab which has the Employee details. There is a input field on top of the table that allows searching, and if the Employee is not in there by the typed name, the user can hit Enter and it takes you to the details tab to create a new entry for that Employee .When I select a Employee and it takes me to the details tab, I want to be able to go back to the table and select a new Employee if need be. problem is that Employee is a empty row on the table. i need to reopen the modal for it to reappear.
plunkr
<div class="container">
<form class="form-horizontal" ng-submit="submitEmployee()" enctype="multipart/form-data">
<tabset>
<tab heading="List" select="ClearEmployeeModalFields();">
<div class="col-xs-12" style="margin-top:20px;width:initial">
<div style="overflow: auto;height:190px;max-width:520px;min-width:520px" id="scrollAreaCustomers">
<table class="table" style="">
<tr>
<th style="font-weight: bold;">Name</th>
</tr>
<tr>
<input type="text" placeholder="New Employee" ng-model="selectedEmployee.EmployeeFirstName" ng-enter="data.static = true" />
</tr>
<tr ng-repeat="employee in employeeArray | filter:selectedEmployee.EmployeeFirstName" class="pointer">
<td ng-click="setSelectedEmployee(employee);data.static = true">{{employee.EmployeeFirstName}} {{employee.EmployeeLastName}}</td>
</tr>
</table>
</div>
</div>
<!--End col-xs-12-->
</tab>
<tab heading="Details" active="data.static">
<div class="col-xs-12" style="margin-top:20px">
<div class="inline-fields" style="">
<label style="margin-left:-11px">Employee Id:</label>
<input style="width:100px" ng-model="selectedEmployee.CompanyEmployeeId" type="text">
<label style="margin-left:100px">Email:</label>
<input style="width:150px" ng-model="selectedEmployee.EmployeeEmail" type="email">
</div>
<div class="inline-fields">
<label style="margin-left:0px">First Name:</label>
<input style="width:150px" ng-model="selectedEmployee.EmployeeFirstName" type="text">
<label style="margin-left:57px">Title:</label>
<select style="width:150px" ng-model="selectedEmployee.EmployeeTitle">
<option value="" selected="selected">Select</option>
<option value="Manager" ng-model="selectedEmployee.EmployeeTitle">Manager</option>
<option value="Admin" ng-model="selectedEmployee.EmployeeTitle">Admin</option>
<option value="OfficeBitch" ng-model="selectedEmployee.EmployeeTitle">Office Bitch</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:1px">Last Name:</label>
<input style="width:150px" ng-model="selectedEmployee.EmployeeLastName" type="text">
<label style="margin-left:66px">PM:</label>
<select style="width:150px" ng-model="selectedEmployee.EmployeeIsPM" ng-options="o.v as o.n for o in [{ n: 'No', v: false }, { n: 'Yes', v: true }]">
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:0px">Cell Phone:</label>
<input style="width:150px" ng-model="selectedEmployee.EmployeeCellPhone" type="text" ui-mask="{{'[phone]'}}">
<label style="margin-left:46px">Super:</label>
<select style="width:150px" ng-model="selectedEmployee.EmployeeIsSuper" ng-options="o.v as o.n for o in [{ n: 'No', v: false }, { n: 'Yes', v: true }]">
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:-14px">Office Phone:</label>
<input style="width:150px" ng-model="selectedEmployee.EmployeeOfficePhone" type="text" ui-mask="{{'[phone]'}}">
</div>
</div>
</tab>
</tabset>
<!--End Tab Content-->
<br />
<div class="col-xs-12" style="margin-top: 220px;position:absolute">
<input style="margin-left: 3px; width: 70px" ng-click="updateEmployee(selectedEmployee)" type="button" value="Update" go-click="#" />
<input style="margin-left:285px;width:70px" type="submit" value="Save" go-click="#" />
<input style="margin-left: 20px; width: 70px" type="button" ng-if="true" data-dismiss="modal" value="Exit" go-click="#" />
</div>
Controller
//Sync Employee Table with Input Fields "New Employee Modal
$scope.setSelectedEmployee = function (employee) {
$scope.selectedEmployee = employee;
}
//Activate tab on selection
$scope.data = { static: false }
//GET Employees
EmployeeGet.query().then(function (data) {
$scope.employeeArray = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
//Clear Employee Search Input Fields
$scope.ClearEmployeeModalFields = function () {
$scope.selectedEmployee.EmployeeCompanyId = '';
$scope.selectedEmployee.EmployeeFirstName = '';
$scope.selectedEmployee.EmployeeLastName = '';
$scope.selectedEmployee.EmployeeTitle = '';
$scope.selectedEmployee.EmployeeCellPhone = '';
$scope.selectedEmployee.EmployeeOfficePhone = '';
$scope.selectedEmployee.EmployeeEmail = '';
$scope.selectedEmployee.CompanyEmployeeId = '';
$scope.selectedEmployee.EmployeeIsSuper = '';
$scope.selectedEmployee.EmployeeIsPM = '';
};

Answer 1

I think the problem is when you are trying to do the object assignment. In Javascript, primitive types are copied by value and reference types are copied by reference.
$scope.setSelectedEmployee = function (employee) {
$scope.selectedEmployee = employee;
};
So when you deleting the $scope.selectedEmployee using $scope.ClearEmployeeModalFields function, it will delete the object in the array of $scope.employeeArray since it shares the same reference.
Try to replace your function with this to copy instead of pointing to same data:
$scope.setSelectedEmployee = function (employee) {
angular.extend($scope.selectedEmployee, employee);
};