title: Remove item from location.search in AngularJS
body: <p>Here on SO there's plenty of questions like this one but none of the answers helped me so far.</p>
  
  <p>I've read the Angular <a href="https://docs.angularjs.org/api/ng/service/$window" rel="nofollow noreferrer">$window</a> and <a href="https://docs.angularjs.org/api/ng/service/$location" rel="nofollow noreferrer">$location</a> docs but I can't achieve what I want from my client app.</p>
  
  <p>Let's say I've a webpage where the user can set multiple filters and share them, the sharing works through GET parameters <code>?f=AN_HASH</code> this triggers a query to my server which replies with the filter set matching the passed hash.</p>
  
  <p>Active filters are stored in <code>SessionStorage</code> (via <code>$sessionStorage</code> from <code>ngStorage</code>).</p>
  
  <p>Eventually the user can clear current filter set via a button. The expected flow triggered by this button should be:</p>
  
  <ul>
  <li>Clear Session Storage item</li>
  <li>Clear the url query parameter <code>?f=</code> (I'd like to remove just this since there could be more than one parameter in the future)</li>
  <li>Reload the page</li>
  </ul>
  
  <p>This is the function called on <code>ng-click</code>:</p>
  
  <pre><code>$scope.clearFilters = function(){
  
      $sessionStorage.queryFilters = {} // Empty SessionStorage
      $scope.activeFilters = false      // Disable Clear button
  
      console.log('before:', location.search)
  
      // $location.search({})
      // $location.search('f', null)
      // $location.search('f', null).replace()
  
      console.log('after:', location.search)
  
      $window.location.reload() // reload the page
  }
  </code></pre>
  
  <p>Between the two <code>console.log</code> you can find what I've tried so far.
  The two console logs prints the following:</p>
  
  <pre><code>before: ?f=THE_HASH
  after: ?f=THE_HASH
  </code></pre>
  
  <p>apparently nothing has changed.. (also the GET query in the address bar is still there)</p>
  
  <p>I tried by just emptying the <code>location.search</code> object like this:</p>
  
  <pre><code>$scope.clearFilters = function(){
  
      $sessionStorage.queryFilters = {} // Empty SessionStorage
      $scope.activeFilters = false      // Disable Clear button
      location.search = ''              // Reset location.search and reload page
  }
  </code></pre>
  
  <p>This actually worked, but I don't like it since it removes ALL elements from the GET query and this could lead to problems in the future if I'll ever need to add more parameters which shouldn't been cleaned this way..</p>
  
  <p><hr>
  Other question that can provide background about my searches:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/18564407/with-location-search-how-to-remove-a-parameter-from-the-url-when-its-null">This</a>;</li>
  <li><a href="https://stackoverflow.com/questions/17376416/angularjs-how-to-clear-query-parameters-in-the-url">This</a>.</li>
  </ul>
  
  <p><hr>
  As @Chris suggested I tried launching:
  <code>angular.element(document.body).injector().get('$location').search("f",null)</code></p>
  
  <p>The url GET hasn't been affected. In the attached image there's what i got from the Chrome console.</p>
  
  <p><a href="https://i.stack.imgur.com/XDnOB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XDnOB.png" alt="Chrome console output"></a></p>