Add data to an array on the AngularJS main page

'use strict'; // Controllers var bookApp = angular.module('bookApp', ['vModal']); bookApp.config(['$locationProvider', '$httpProvider', function($locationProvider, $httpProvider) { $locationProvider.html5Mode(true); $httpProvider.defaults.transformRequest = function(data) { if (data === undefined) { return data; } function serialize(obj, prefix) { if (typeof obj === 'string') { return obj; } var str = []; for (var p in obj) { if (obj.hasOwnProperty(p)) { var k = prefix ? prefix + '[' + p + ']' : p, v = obj[p]; str.push(typeof v == 'object' ? serialize(v, k) : encodeURIComponent(k) + '=' + encodeURIComponent(v)); } } return str.join('&'); }; return serialize(data); }; $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'; }]); bookApp.controller('contr', function($scope, $http, myModal){ var url="http://127.0.0.1:8090/api/v1/book/all"; $scope.books = []; $http.get(url).then(function(response){ $scope.books=response.data.book; }); $scope.add = function(book){ var url="http://127.0.0.1:8090/api/v1/book/add"; $http.post(url, book) .then(function(response){ console.log(response.data.book) $scope.books.push(response.data.book); }); } $scope.del = function(book){ if (confirm("вы уверены?")){ $http.post("http://127.0.0.1:8090/api/v1/book/remove", book).then(function success (response){ console.log(response.data.book) $scope.books.slice(book); }); } else { return false; } } $scope.openModal = function() { myModal.activate()}; $scope.search = function(book){ $http.get("http://127.0.0.1:8090/api/v1/book/search?name="+book.name) .then(function(response) { $scope.fbooks=response.data.book; alert(fbooks); }); } $scope.change = function(book){ var url="http://127.0.0.1:8090/api/v1/book/update"; $http.post(url, book) .then(function(response){ console.log(response.data.book) $scope.books.push(response.data.book); }); } $scope.getByName = function(book){ var url="http://127.0.0.1:8090/api/v1/book/search?name="; $scope.abbooks = []; $http.get(url+book.name).then(function(response) { bookService.addBook(response.data.book); $scope.abbooks.push(response.data.book); }); } $scope.sortFiled = undefined; $scope.reverse = false; $scope.sort = function(filedName) { if ($scope.sortFiled === filedName) { $scope.reverse =!$scope.reverse; } else { $scope.sortFiled = filedName; $scope.reverse = false; } } $scope.currentPage = 0; $scope.pageSize = 10; $scope.data = []; $scope.numberOfPages=function(){ return Math.ceil($scope.data.length/$scope.pageSize); } for (var i=0; i<45; i++) { } // app.filter('startFrom', function() { // return function(input, start) { // start = +start; //parse to int // return input.slice(start); // } // }); $scope.data.push("Item "+i); }); bookApp.factory('myModal', function (vModal) { return vModal({ controller: function (myModal) { this.close = myModal.deactivate; this.show = myModal.activate; }, controllerAs: 'myModalCtrl', templateUrl: 'templates/my-modal.html' }); }); bookApp.factory('myModal1', function (vModal) { return vModal({ controller: 'MyModal1Controller', controllerAs: 'myModal1Ctrl', templateUrl: 'templates/my-modal1.html' }); }); bookApp.controller('MyModal1Controller', function (myModal1) { this.closeFind = myModal1.deactivate; }); bookApp.controller('OpenModal', function (myModal1) { this.showFind = myModal1.activate; }); bookApp.factory('myModal2', function (vModal) { return vModal({ controller: 'MyModal2Controller', controllerAs: 'myModal2Ctrl', templateUrl: 'templates/my-modal2.html' }); }); bookApp.controller('MyModal2Controller', function (myModal2) { this.closeChange = myModal2.deactivate; }); bookApp.controller('OpenModal2', function (myModal2) { this.showChange = myModal2.activate; }); bookApp.factory('myModal3', function (vModal) { return vModal({ controller: 'MyModal3Controller', controllerAs: 'myModal3Ctrl', templateUrl: 'templates/my-modal3.html' }); }); bookApp.controller('MyModal3Controller', function (myModal3) { this.closeAbout = myModal3.deactivate; }); bookApp.controller('OpenModal3', function ($scope, myModal3) { this.showAbout = myModal3.activate; }); bookApp.controller('searchBook', function addBook($scope, $http){ var url="http://127.0.0.1:8090/api/v1/book/search?name="; $scope.fbooks = []; $scope.search = function(book){ $http.get(url+book.name).then(function(response) { $scope.fbooks.push(response.data.book); }); } }); bookApp.factory('myModal', function (vModal) { return vModal({ controller: function (myModal) { this.close = myModal.deactivate; }, controllerAs: 'myModalCtrl', templateUrl: 'templates/my-modal.html' }); }); 

 <v-modal class="vModal--default" onclose="myModalCtrl.close()"> <v-dialog heading="My modal" small middle> <v-close label="Close"></v-close> <div ng-controller="contr"> <h3>Add Book</h3> <form > <label>Author</label><br> <input ng-model="book.author" type="text" name="author" /><br><br> <label>Name</label><br> <input ng-model="book.name" type="text" name="name" /><br><br> <label>Description</label><br> <input ng-model="book.description" type="text" name="description" /><br><br> <label>Publish</label><br> <input ng-model="book.publish" type="text" name="publish" /><br><br> <label>Year</label><br> <input ng-model="book.year" type="number" size="4" min="1000" max="2018" value="1000" name="year" /><br><br> <button type="button" ng-click="add(book); myModalCtrl.close()">Добавить книгу</button> <button ng-click="myModalCtrl.close()">Закрыть</button> </form> </div> </v-dialog> </v-modal> 

 Index.html <!DOCTYPE html> <html lang="en" ng-app="bookApp">    <head>        <meta charset="UTF-8">        <title>Books</title> <script src="js/angular.min.js"></script> <script src="js/v-modal-master/dist/v-modal.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> --> <link rel="stylesheet" href="js/v-modal-master/dist/v-modal.css"> <script src="js/controllers.js"></script> <base href="/">    </head>    <body ng-controller="contr">        <h2>Список книг</h2> <div> <button ng-click="OpenModal()">Добавить книгу</button> </div> <div ng-controller="OpenModal as appCtrl"> <!-- <div ng-controller="getAll"> --> <!-- <input ng-model="book.name" placeholder="Введите название книги которую хотите найти"> --> <button ng-click="appCtrl.showFind()">Найти книгу</button> <!-- </div> --> </div> <div >        <table>            <thead><th>id</th><th>Автор</th><th><a href="" ng-click="sort('name')">Название</a></th><th>Описание</th><th>Публикатор</th><th><a href="" ng-click="sort('year')">Год</a></th><th>операции</th></thead>            <tr ng-repeat="book in books | orderBy:sortFiled:reverse">                <td>{{book.id}}</td>                <td>{{book.author}}</td>                <td><a ng-controller="OpenModal3 as appCtrl" ng-click="appCtrl.showAbout(book); getByName(book)" href="" >{{book.name}}</a></td>                <td>{{book.description}}</td> <td>{{book.publish}}</td> <td>{{book.year}}</td>                <td><div ng-controller="OpenModal2 as appCtrl"><a ng-click="appCtrl.showChange()" href="" class="href">Изменить</a></div> | <a ng-click="del(book)" href="" class="href">Удалить</a>                </td>            </tr>        </table> </div>    </body> </html>