title: GET requests with submit forms using angularjs
body: <p>So after learning a bit of AngularJS I was able to get a controller to call an API and store the results in a variable, which is then displayed on my page (whew...). If I go to:</p>
  
  <pre><code>http://127.0.0.1:3000/#/search
  </code></pre>
  
  <p>I see the page with the submit form but without the results, and if I go to:</p>
  
  <pre><code>http://127.0.0.1:3000/#/search?query=deep&amp;learning
  </code></pre>
  
  <p>I see the page with the submit form + the results for the "deep &amp; learning" query. The problem is: I have to enter "?query=deep?learning" manually, I'm unable to use the submit form to get there. I use this code:</p>
  
  <pre><code>&lt;form name='input' action='#search' method='get'&gt;
    &lt;div class='input-group'&gt;
      &lt;input type='text'
             class='form-control'
             placeholder='Enter query.'
             name='query'&gt;
      &lt;div class='input-group-btn'&gt;
        &lt;button class='btn btn-default' type='submit'&gt;&lt;i class='fa fa-search'&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>With this submit form, if I enter "deep &amp; learning" in the form, I get to</p>
  
  <pre><code>http://127.0.0.1:3000/?query=deep&amp;learning#/search
  </code></pre>
  
  <p>How do I change my code so entering "deep &amp; learning" would get me to:</p>
  
  <pre><code>http://127.0.0.1:3000/#/search?query=deep&amp;learning
  </code></pre>
  
  <p>?</p>
  
  <p>Thank you</p>
  
  <p>UPDATE1: code for routes:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute'])
    .factory('myQuery', ['$http', function($http) {
      var doRequest = function(query) {
        return $http({
          method: 'GET',
          url: 'http://127.0.0.1:3000/api/v0/docs?search=' + query
        });
      };
      return {
        results: function(query) { return doRequest(query); }
      };
    }]);
  
  myApp.config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
      })
      .when('/search', {
        templateUrl : 'pages/search.html',
        controller  : 'searchController'
      });
  });
  
  myApp.controller('mainController', function($scope) {
    // ...
  });
  
  myApp.controller('searchController', ['$scope', '$routeParams', 'myQuery', function($scope, $routeParams, myQuery) {
    myQuery.results($routeParams.query)
      .success(function(data, status, headers) {
        $scope.count = data.count;
        $scope.results = data.results;
      });
  }]);
  </code></pre>