Passing user input into $http.get request angularJS

Question

I am currently trying to pass user input into my $http.get request. I am using bootstrap and angular but am confused as I have am trying to pass two dates through a bootstrap modal. I currently have a controller like this

app.controller('testCtrl', function($scope, $http){
  $http.get("website" + box1 + box2).then(function(r){
    $scope.Data = r.data;
  });
});

And a modal in bootstrap with

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input id="box1" type="text"/>
  <input id="box2" type="text"/>
</div>
<div class="modal-footer">
  I don't know what to put here to pass it into angular
</div>

Answer 1

use this:

app.controller('testCtrl', function($scope, $http){
  $scope.box1 = "";
  $scope.box2 = "";
  $http.get("website" + $scope.box1 + $scope.box2).then(function(r){
    $scope.Data = r.data;
  });
});
And a modal in bootstrap with

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input ng-model="box1" id="box1" type="text"/>
  <input ng-model="box2" id="box2" type="text"/>
</div>
<div class="modal-footer">
  I don't know what to put here to pass it into angular
</div>

Answer 2

In controller

app.controller('testCtrl', function($scope, $http){
 $scope.submit = function(){
  $http.get("website" + $scope.box1 + $scope.box2).then(function(r){
    $scope.Data = r.data;
  });
 };
});

In bootstrap modal html make sure this HTML is using testCtrl controller

<div class="modal-header">
  <h4 class="modal-title">test</h4>
</div>
<div class="modal-body">
  <input ng-model="box1" type="text"/>
  <input ng-model="box2" type="text"/>
</div>
<div class="modal-footer">
  <button ng-click="submit()" class="btn">Submit(or text you want to keep)</button>
</div>