title: Change angular model by filling a field form a previous locally stored value
body: <p>I have a page with a select menu. I want to store that choice before moving to the search page. I can put the value in the search input, but it does not seem to be read by the angular search/filter. If I backspace once... or change the value in any way, it kicks in.</p>
  
  <p>How can I shove a value in there have angular read it as if I had typed it in? Not sure of the right words to use. Thanks. There is more code, but I think that this will be enough to see what my issue is. Let me know if that is not the case.. Thanks.</p>
  
  <p><a href="http://codepen.io/sheriffderek/pen/dtAIy/" rel="nofollow">http://codepen.io/sheriffderek/pen/dtAIy/</a></p>
  
  <p>Here is a codepen. It's not really the same because it is sandboxed into one page, and also the local storage is effected. BUT. If my question is at all clear, it should be enough code.</p>
  
  <p>Man makes angular filtered search. Man takes string. Man puts sting into the search input. Search does not reflect change.</p>
  
  <h2>select html</h2>
  
  <pre><code>&lt;select name='state' id='state_select'&gt;
      &lt;option value='state-name' data-state='California'&gt;California&lt;/option&gt;
      &lt;option value='state-name' data-state='Arizona'&gt;Arizona&lt;/option&gt;
      &lt;option value='state-name' data-state='New York'&gt;New York&lt;/option&gt;
      &lt;option value='state-name' data-state='Utah'&gt;Utah&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><br /></p>
  
  <h2>css (irrelevant)</h2>
  
  <p><code>/* n/a */</code></p>
  
  <p><br /></p>
  
  <h2>action js</h2>
  
  <pre><code>var getTheState = function(input) {
      var theState = $(input).data('state');
      localStorage.setItem('state', theState);
      console.log(theState);
  };
  
  $('#state_select').on('change', function() {
      if (this.selectedIndex!==0) {
          var destinationPage = "search.html";
          getTheState('option:selected');
          document.location.href = destinationPage;
      }
  });
  </code></pre>
  
  <p><br /></p>
  
  <h2>the gist of the angular</h2>
  
  <p></p>
  
  <pre><code>&lt;input type="search" data-ng-model="listingFilter" /&gt;
  
  &lt;ul class='things-list' data-ng-controller='DetailedNameOfController as listOf'&gt;
  
      &lt;li class='thing' data-ng-repeat='thing in listOf.things | search:listingFilter'&gt;
          {{ thing.name | filter: name }}
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>