Angular Js- Bootstrap table not refreshing immediately after new data is added - angularjs

Question

books.html
<div ng-controller="BookController">
<table datatable="ng" class="row-border hover" ng-table="tableParams">
<thead>
<tr>
<th>BookID</th>
<th>BookName</th>
<th>Author</th>
<th>ISBNCode</th>
<th>NoOfBooks</th>
<th>PublishDate</th>
<th>NoOfBooksIssued</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{book.BookId}}</td>
<td>{{book.BookName}}</td>
<td>{{book.Author}}</td>
<td>{{book.ISBNCode}}</td>
<td>{{book.NoOfBooks}}</td>
<td>{{book.PublishDate}}</td>
<td>{{book.NoOfBooksIssued}}</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil"></span></button></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p></td>
</tr>
</table>
</div>
Bookcontroller.js
"use strict";
(function () {
angular.module("Bookapp")
.controller("BookController", ["$scope", "BookService",
function ($scope, bookService) {
bookService.getRequest()
.then(function (response) {
$scope.books = JSON.parse(response);
});
}]);
})();
AddBookController.js
"use strict";
(function () {
angular.module('Bookapp')
.controller('AddBookController', ["$scope", "BookService",
function ($scope, bookService) {
$scope.save = function (item) {
bookService.postRequest(item)
.then(function () {
location.path("books");
});
}
}]);
})();
Both the js files are 2 different custom files which are included in the master page. I have also written BookService.js. Which is as follows:
"use strict";
(function () {
angular.module("Bookapp")
.factory("BookService", ["$http", "$q", function ($http, $q) {
var baseURL = "http://localhost:27136/api/book";
var getRequest = function (query) {
var deferred = $q.defer();
$http({
url: baseURL,
method: "GET"
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var getByIdRequest = function (id) {
var deferred = $q.defer();
$http({
url: baseURL + "/" + id,
method: "GET"
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var postRequest = function (data) {
var deferred = $q.defer();
$http({
url: baseURL,
method: "POST",
data: JSON.stringify(data)
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var updateRequest = function (data, id) {
var deferred = $q.defer();
$http({
url: baseURL + "/" + id,
method: "PUT",
data: JSON.stringify(data)
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
var deleteRequest = function (id) {
var deferred = $q.defer();
$http({
url: baseURL + "/" + id,
method: "DELETE"
})
.success(function (result) {
deferred.resolve(result);
})
.error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};
return {
getRequest: getRequest,
getByIdRequest: getByIdRequest,
postRequest: postRequest,
updateRequest: updateRequest,
deleteRequest: deleteRequest
};
}]);
})()
My problem is when I click on the add button below my table the details of the book that i have entered must update in the table immediately which is not happening in my case. I have 2 different controllers one is BookController which will get all the books details from db using a service method and display in the table. The other one is AddBookController which will add the new book details to the table.In AddBookController itself i have written code to get the data after posting it to db. But i am not able to refresh the table with new data.Please help me. Thank you so Much in advance!

Answer 1

First of all you have a code smell in your service because you don't need to use $q service for retrieving a promise from $http.
$http always return a promise itself!
so you can simplify all your functions like this:
var getRequest = function (query) {
return $http({
url: baseURL,
method: "GET"
});
};
For your question
Have you try debugging the bookService.getRequest() request?
Try putting a console.log in your book controller and see if it's called after the add.
Maybe you need to trigger the get request after the add.

Answer 2

"use strict";
(function () {
angular.module('Bookapp')
.controller('AddBookController', ["$scope", "BookService",
function ($scope, bookService) {
$scope.save = function (item) {
console.log(item);
bookService.postRequest(item)
.then(function () {
bookService.getRequest()
.then(function (response) {
$scope.books = JSON.parse(response);
});
});
}
}]);
})();