updating ng-repeat list on adding data locally in angularjs - angularjs

Question

I have a table that displays the list of data from websql local database.Onclick of add Button list of doctors are provided to add to the database.The adding is done but problem is that i am not able to update the datalist and see the added record.After page refreshing i could see the added record.Can anybody plz help me here.I am posting my code below.The html view template is as follows:
<table class="table table-hover" >
<tr>
<th>DOCTOR</th>
<th>SPECIALITY</th>
<th>PATCH</th>
<th>CLASS</th>
<th> </th>
</tr>
<tr ng-repeat="doc in listDoctors">
<td>{{ doc.contactName }}</td>
<td>{{ doc.speciality }}</td>
<td>{{ doc.townName }}</td>
<td>{{ doc.class }}</td></tr></table>
Now controller does:
//displays list of doctors
$scope.listDoctors = [];
readData.transaction(sqlDoctorDetails,0)
.then(function (data) {
$scope.listDoctors=data;
});
adds the data to database
$scope.AddToList = function() {
var db = openDatabase("database");
db.transaction(function(tx) {
tx.executeSql(insertStatement);
});
Please help me to improve the code to update the list on adding new entry into the database.
sqlDoctorDetails and insertStatement are my query variables for displaying and inserting data respectively.

Answer 1

In the AddToList function push the latest doctor details which will update the list as well
So whenever you click on the add button and call a controller function:
$scope.addDoctorToDB(doctorDetail){
//add it to the doctor's list
$scope.listDoctors.push(doctorDetail);
//Now do the db operation say calling your add function
this.AddToList();
}

Answer 2

My Angular knowledge is rusty but I think after you insert into the DB you need to either insert to the in-memory model listDoctors or trigger the sqlDoctorDetails query to read the updated data into listDoctors.
Angular observes your model for changes but it doesn't observe the DB behind the model.