angularjs - angularJSコントローラーで、ビューからの動的な値をURLに追加していますが、未定義の値を取得しています

Question

以下は私のビューです。ビューから、コントローラーの特定のURLに追加されたIDを使用して、対応するブックを取得しています

<div ng-controller="viewBookController">
<form ng-submit="getBook()">
    Your ID:<input type="text" ng-model="id"/><br>
    <input type="submit" value="View Book"/><br>
    Book Author : {{book.author}}<br>
    Book Title : {{book.title}}<br>
</form>
</div>

そして私のコントローラーは：

mainApp.controller("viewBookController", function($scope,$http) {
var resData = {};
$scope.book = {};
var url = "http://localhost:8080/webservice-1.0/rest/book/"+ $scope.id;
$scope.getBook = function(){
    $http.get(url)
    .then(function(response) {
        $scope.book = angular.fromJson(response.data);
    });
}
});

上記のコントローラーでは、ビューから id にアクセスして URL を追加しようとしていますが、$scope.id未定義の値が返されています。