title: Fire directive, refresh, & pass parameter on ng-click
body: <h3>tldr;</h3>
  <p>I need to fire a custom directive/jQuery plugin on <code>ng-click</code> and pass a parameter to it then reload that page so the parameter's value takes place. So on reload instead of there being 3 results in my Google Map, there should be 50 results showing.</p>
  <hr />
  <h3>Disclaimer</h3>
  <p>I've done a ton of reading on firing directive on ng-click as well as passing parameters to directive (particularly <a href="https://stackoverflow.com/questions/18479096/angular-js-passing-parameter-to-ng-click-directive-within-custom-directive">this question</a> and <a href="https://stackoverflow.com/questions/13725938/angularjs-how-to-pass-arguments-functions-to-a-directive">this question</a> and <a href="https://stackoverflow.com/questions/16432198/passing-variable-to-angular-directive">this question</a>) but I am fairly new to AngularJS so I'm still a bit naive to all the greatness of Angular and how to utilize it properly...</p>
  <h3>Background</h3>
  <p>I created a jQuery plugin for a Google Maps API app I'm creating. The app is using AngularJS also. The plugin creates a map and shows 3 locations to the user <a href="https://github.com/jamez14/TrailFinder/blob/master/js/map.js" rel="nofollow noreferrer">plugin code here</a>. Under the map I have the list of 3 locations in a table. I also have a button that says <em>more results</em> which should return 50 more locations.</p>
  <h3>Question</h3>
  <p>What is the best way to...</p>
  <ol>
  <li><p>Pass a new parameter to my plugin/directive? Currently on page load I load the directive and fire the plugin by <code>&lt;div tfinder-map=&quot;{queryLimit: 3}&quot;&gt;</code>. Ideally I'd like to be passing 50 when I click the <em>more results</em> button.</p>
  </li>
  <li><p>Along with passing the param to my directive/plugin on click of <em>more results</em>, I would like it to essentially fire the directive and reload the page so the 50 results show up, instead of just 3.</p>
  </li>
  </ol>
  <p>After reading other questions, I think passing a param to my directive would go something like this (although I'm sure the syntax is wrong):</p>
  <p><code>ng-click=&quot;tfinder-map(queryLimit: 50)&quot;</code></p>
  <p>And to be able to persist that value as the page reloads, the only way I could think to do that would be via a query string argument in the URL.</p>
  <p>I also did a little reading about <strong>$route.reload()</strong> which sounds interesting, I just don't know the best way to implement this to do a reload with params.</p>
  <h3>The code</h3>
  <p>My current directive looks like this:</p>
  <pre><code>directive('tfinderMap', function() {
  return {
      restrict: 'A',
      link: function(scope, elm, attrs) {
          $(elm).tfindermap(scope.$eval(attrs.tfinderMap));
      }
  };
  </code></pre>
  <p>})</p>
  <p>And in jQuery it'd be</p>
  <pre><code>$('#foo').tfindermap({queryLimit: 3})
  </code></pre>
  <p>The actual jQuery plugin can be viewed <strong><a href="https://github.com/jamez14/TrailFinder/blob/master/js/map.js" rel="nofollow noreferrer">here on Github</a></strong></p>
  <p>Also, here's the UI if it helps visualize it</p>
  <p><img src="https://i.imgur.com/c6B4njH.png" alt="the UI" /></p>
  <p><em>clicking the more results button should make 50 results appear as opposed to 3</em></p>