title: Reflect changes in scope to current URL
body: <p>I'm quite new to angular and have no much front-end experience.
  I use angular + material UI, and what'm trying to do is once user changed filter, those changes should be reflected to URL, e.g. suppose, user changed a value of an input field named "search_term" to be "foo", the URL should be example.com/search/?search_term=foo
  So, I've got something like this:</p>
  
  <pre><code>&lt;md-input-container flex="50"&gt;
      &lt;label&gt;Search term&lt;/label&gt;
      &lt;input type="text" name="search_term" ng-model="CTRL.search_term" required /&gt;
  &lt;/md-input-container&gt;
  </code></pre>
  
  <p>What I tried to do is:</p>
  
  <pre><code>$scope.$groupWatch(['search_term', 'duration', ... ], function (newValues, oldValues, scope)) {
      // assemble filter values, create query string, replace old query string with new one
      var qs = assembleNewQs();
      $location.search(qs);
  }
  </code></pre>
  
  <p>And I realized this won't work due to that fact that <code>angular</code> overrides all of my watch's since I reference those variables in expressions.</p>
  
  <p>I wouldn't like to do something like:</p>
  
  <pre><code>var currentQs = $location.search();
  $timeout(function () {
      var newQs = assembleNewQs();
      if (currentQs != newQs) {
          $location.search(newQs);
          currentQs = newQs;
      }
  }, 100);
  </code></pre>
  
  <p>This would work, of course, but is there any other, more clean, or, so to say, <code>angularish</code> way of doing that?</p>