title: Angular JS - Resetting a dropdown with a function
body: <p>I have a listener set up in Angular to trigger an event when a select box's option changes. </p>
  
  <p>I also have a button, which I want to "reset" the selection box to blank (NOT option 1). </p>
  
  <p>Here's some code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="dropdown" ng-model="orderProp" &gt;
    &lt;option ng-repeat="cats in categories" value="{{cats}}"&gt;{{cats}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="showHide" ng-click="showAll($event)" &gt;Show all results&lt;/button&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$scope.showAll = function($event){
      $scope.orderProp ="0";
  }
  </code></pre>
  
  <p>Listener function on the select box: </p>
  
  <pre><code>   $scope.$watch( 'orderProp', function ( val ) {
          $scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val);
          $scope.zoomProperty = 11;
          calcFocus();
      });
  </code></pre>
  
  <p>This KINDA works, although only sometimes, and I have no idea <strong>why</strong> it works (or doesn't) as I think it's the wrong way of going about it. I tried resetting it with jQuery <code>.prop('selectedIndex',0);</code>, but while this resets the index it doesn't trigger the listening function at all so this won't work.</p>
  
  <p>Any ideas?</p>