AngularJS strange query behavior with UI Router
<p>Have a small search app using Elasticsearch and AngularJS. I'm using <code>$state.go()</code> in my search() on my ng-submit button. <code>searchTerms</code> is my ng-model on the input.</p>

<p>I have 2 controllers, homeCtrl and searchCtrl. homeCtrl is for homepage which is just a search box and provides autocomplete functionality. searchCtrl is for results page and has same search box and provides for results area.</p>

<p>When I have <code>$state.go()</code> like this:</p>

<pre><code>$state.go('search', {q: searchTerms});
</code></pre>

<p>It solved a problem I was having, which was</p>

<pre><code>http://localhost:8000/app/search?q=searchTerms
</code></pre>

<p>INSTEAD of</p>

<pre><code>http://localhost:8000/app/search?q=userTypedInput
</code></pre>

<p>So now the url functions correctly, but the search results do not display...?</p>

<hr>

<p>When I have</p>

<pre><code>$state.go('search', {q: 'searchTerms'});
</code></pre>

<p>The search results display BUT the url does not function as desired.</p>

<p>So basically what I'm asking is how can I get my url to function as desired which is</p>

<pre><code>http://localhost:8000/app/search?q=userTypedInput
</code></pre>

<p>AND still have the search results display?</p>

<p><strong>UPDATE</strong>
These are my states for ui router</p>

<pre><code>$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'home/home.html', controller: 'homeCtrl'})
  .state('search', {
    url: '/search?q',
    views: {
      '' : { templateUrl: 'search/search.html', controller: 'searchCtrl' }
      //add more views here when necessary
    }
  });
</code></pre>

<p><strong>searchCtrl</strong></p>

<p>I have this at the top</p>

<pre><code>    'use strict';

angular.module("searchApp.search", ['ngAnimate'])
  .controller('searchCtrl', ['$scope', '$sce', '$stateParams', '$state', 'searchService', function($scope, $sce, $stateParams, $state, searchService) {

  $scope.searchTerms = $stateParams.searchTerms || null;
</code></pre>

<p>and this is search(), which contains the <code>$state.go()</code></p>

<pre><code>    $scope.search = function() {
    resetResults();

    var searchTerms = $scope.searchTerms;

    if (searchTerms) {
      $scope.results.searchTerms = searchTerms;
    } else {
      return;
    }

    getResults();//calls searchService which does the searching

    $state.go('search', {q: searchTerms});
  };



var getResults = function() {
$scope.isSearching = true;

searchService.search($scope.results.searchTerms,$scope.currentPage,...
</code></pre>

<p>I'm trying to get the url to be </p>

<pre><code>http://localhost:8000/app/search?q=userTypedInput
</code></pre>

<p>and have the results display as well.</p>