How update model after inserting entry to database? And refresh a view - php

Question

I shyly trying to make friends Angular and backend database.
Simple operations. Get database to angular model. Save entry in database, and delete entry.
I'm stacked on DELETE action. When i delete entry that loaded from database it's ok. But when i delete newly created row by push method, i got error.
This occurs because in the model absent id. After inserting entry to database, i trying repeatedly refresh Angular model from database.($http.get) But in this case, a view didn't refresh (only blinks). I saw new entry only refresh page F5.
Help!
Books
<div ng-app="App" ng-controller="MyCtrl">
<table class="">
<th>
<tr style="font-size: 20px">
<td>ID</td>
<td>Name</td>
<td>Price</td>
<td>Action</td>
</tr>
</th>
<tr ng-repeat="book in books">
<td style="width: 200px">{{book.id}}</td>
<td style="width: 200px">{{book.name}}</td>
<td style="width: 50px">{{book.price |currency}}</td>
<td>
<button ng-click="removeItem($index)">Удалить</button>
</td>
</tr>
<tr>
<td></td>
<td><input type="text" ng-model="name"/></td>
<td><input type="number" ng-model="price"/></td>
<td>
<button ng-click="addBook()">Добавить книгу</button>
</td>
</tr>
</table>
</div>
<script>
var App = angular.module('App', []);
App.controller('MyCtrl', function ($scope, $http) {
$http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
$scope.books = data;
});
$scope.removeItem = function (index) {
var id = $scope.books[index].id;
$scope.books.splice(index, 1);
$http.post('http://ang:8888/index.php?r=site/del2', {id: id});
}
$scope.addBook = function () {
var newBook = ({name: $scope.name, price: $scope.price});
$scope.books.push(newBook);
$http.post("http://ang:8888/index.php?r=site/post2", {name: $scope.name, price: $scope.price})
.success(function (data, status, headers, config) {
console.log("inserted Successfully");
});
$http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
$scope.books = data;
});
}
})

Answer 1

The problem is due to async nature of all remote calls. You call the post and get methods in sequence without realizing that both are sync in nature. So your post is immediately followed by get.
Change the code for post to
$http.post("http://ang:8888/index.php?r=site/post2", {
name: $scope.name,
price: $scope.price
}).success(function (data, status, headers, config) {
console.log("inserted Successfully");
$http.get('http://ang:8888/index.php?r=site/api2').success(function (data) {
$scope.books = data;
});
});
In the above code you only do get when post is done.