title: showing animation of poly-lines in googlemap based on user selection in drop-down
body: <p>I have created an application for animating the poly-line in google-maps, the animation will start once we select a particular user from the drop-down, The application is working fine but the issue is that, once a particular animation is started and under proceeding if we select another user the application is getting hanged and showing unexpected animations, </p>
  
  <p>can anyone please tell me some solution for breaking a animation in between once another user is selected and need to show the selected user poly-line animation after that </p>
  
  <p><strong><a href="http://plnkr.co/edit/CHlCbA5eKEdpYMde5bS8?p=preview" rel="nofollow">Plunker</a></strong></p>
  
  <pre><code>&lt;html lang="en"&gt;
  
    &lt;head&gt;
      &lt;script data-require="lodash.js@2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.angularjs.org/1.2.16/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=panoramio"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="app" ng-controller="Controller"&gt;
  
    &lt;select ng-change="showGPSTracking()" ng-model="user"&gt;
      &lt;option selected="selected" value="" class=""&gt;Select User&lt;/option&gt;
      &lt;option value="1458"&gt;1458&lt;/option&gt;
      &lt;option value="1658"&gt;1658&lt;/option&gt;
    &lt;/select&gt;
    &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
      &lt;div style="width: 880px;"&gt;
        &lt;div id="map" style="width: 880px; height: 500px; float: left;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>