title: AngularJS clear model when changing route
body: <p>I have a filter &amp; search function in my fixed header consisting of dropdown (for filter) and input field (for search). </p>
  
  <p>For the dropdown I'm using this <a href="https://github.com/dotansimha/angularjs-dropdown-multiselect" rel="nofollow">Angularjs-dropdown-multiselect</a></p>
  
  <p>At the moment, after submitting the request, user will be directed to result page and the model content for dropdown and input text is preserved and that's how I want it to be. The problem is, I want to reset the model (back to empty) if user go to page other than the result page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-sm-3"&gt;
      &lt;div class="dropdown" ng-dropdown-multiselect="" options="cats" selected-model="catModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Categories'}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-3"&gt;
      &lt;div class="dropdown" ng-dropdown-multiselect="" options="ccs" selected-model="ccModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Credit Cards'}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-6"&gt;
      &lt;form data-ng-submit="findValue(catModel, ccModel, keyword)" &gt;
          &lt;div class="input-group search-bar"&gt;
              &lt;input type="search" class="form-control" placeholder="Search for..." data-ng-model="keyword"&gt;
              &lt;span class="input-group-btn"&gt;
                  &lt;button class="btn btn-search" type="button" data-ng-click="findValue(catModel, ccModel, keyword)"&gt;&lt;img src="img/icon_search.png" alt="Search" /&gt;&lt;/button&gt;
              &lt;/span&gt;
              &lt;input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/&gt;
          &lt;/div&gt;
      &lt;/form&gt;                 
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>.controller('mainController', ['$scope', '$http', '$location', 'dataFactory',
  function ($scope, $http, $location, dataFactory){
      dataFactory.getCategories().success(function (data){
          $scope.cats = data;
      });
  
      dataFactory.getCcs().success(function (data){
          $scope.ccs = data;
      });
      $scope.catModel = [];
      $scope.ccModel = [];
  
      $scope.findValue = function(catModel, ccModel, keyword) {   
      var searchUrl = baseUrl;
      var catID = '';     
      if(catModel.length &gt; 0) {
          searchUrl += 'categoryID=';
          angular.forEach(catModel, function(value, key) {
              if(key &lt; catModel.length - 1) {
                  searchUrl += value.id + ',';
                  catID += value.id + ',';
              } else {
                  searchUrl += value.id;
                  catID += value.id;
              }
          })  
          if(ccModel.length &gt; 0 | keyword != null) {
              searchUrl += '&amp;';   
          }              
      } 
  
      if(ccModel.length &gt; 0) {
          searchUrl += 'ccID=';
          angular.forEach(ccModel, function(value, key) {
              if(key &lt; ccModel.length - 1) {
                  searchUrl += value.id + ',';
              } else {
                  searchUrl += value.id;
              }
          })
          if(keyword != null) {
              searchUrl += '&amp;';
          }                
      } 
  
      if(keyword != null) {
          searchUrl += 'search_keyword=' + keyword; 
      }
  
      $http.get(searchUrl).success(function (data) {
          $scope.results = data;
          $scope.pageTitle = 'Promotions search result';
          $location.path('/promotion');
      })
  }
  }
  </code></pre>
  
  <p>I'm putting the model and function inside mainController because the header is in every view.</p>
  
  <p>I'm quite new in AngularJS and programming so this code might not be proper, please let me know if there's a simpler and proper way. Any help is appreciated.
  Thank you</p>