<script src='datamaps/js/d3.v3.min.js' type='text/javascript'></script>
<script src='datamaps/js/topojson.v1.min.js' type='text/javascript'></script>
<script src='datamaps/js/datamaps.all.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js' type='text/javascript'></script>

<style>
.rChart {
  display: block;
  margin-left: auto; 
  margin-right: auto;
  width: 800px;
  height: 400px;
}  
</style>

        <div class='container'>
          <input id='slider' type='range' min=1999 max=2014 ng-model='year' width=200>
          <span ng-bind='year'></span>
          <div id='chart41531ff28f12' class='rChart datamaps'></div>          
        </div>
        <script>
          function rChartsCtrl($scope){
            $scope.year = 1999;
            $scope.$watch('year', function(newYear){
              mapchart41531ff28f12.updateChoropleth(chartParams.newData[newYear]);
            })
          }
       </script>    
<script id='popup-template' type='text/x-handlebars-template'>

<script></script>