title: Pull to refresh in Angular Js
body: <p>I am using the pull to refresh plugin for Angular JS. But it is not working. I can see the text, but when I try to pull, nothing happens! I completed all the steps documented on this GitHub page: <a href="https://github.com/mgcrea/angular-pull-to-refresh" rel="nofollow">https://github.com/mgcrea/angular-pull-to-refresh</a>.</p>
  
  <p>I have included all the files(plugins/pulltorefresh/angular-pull-to-refresh.js,plugins/pulltorefresh/angular-pull-to-refresh.css,plugins/pulltorefresh/angular-pull-to-refresh.tpl.js,plugins/pulltorefresh/angular-pull-to-refresh.tpl.css) in project.</p>
  
  <p>Do you have a solution?</p>
  
  <p><strong>Below is my controller.js</strong></p>
  
  <pre><code>var phonecatApp = angular.module('phonecatApp', ["ngRoute","ngI18n","phonecatControllers","phonecatservices","LocalStorageModule"]);
  
  phonecatApp.config(['$routeProvider','localStorageServiceProvider',
                  function($routeProvider,localStorageServiceProvider) {
                    localStorageServiceProvider.setPrefix('demoPrefix');
                    $routeProvider.
                    when('/pulltorefresh', {
                        templateUrl: 'templates/pulltorefresh.html',
                        controller: 'PullCtrl'
                        }).
                      when('/login', {
                       templateUrl: 'templates/login.html',
                       controller: 'LoginCtrl'
                       }).
                      otherwise({
                        redirectTo: '/pulltorefresh' 
                      });
                  }]);
   var phonecatControllers = angular.module('phonecatControllers', ["hammer"]);
  
   phonecatControllers.controller('PullCtrl', function($scope, $q) {
   $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  
   $scope.onReload = function() {
   console.warn('reload');
   var deferred = $q.defer();
   setTimeout(function() {
   deferred.resolve(true);
   }, 1000);
   return deferred.promise;
     };
   });
  </code></pre>
  
  <p><em><strong>Below is the index.html</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="phonecatApp"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,   width=device-width"&gt;
  &lt;title&gt;TE&lt;/title&gt;
  &lt;!-- Bootstrap css --&gt;
  &lt;link href="plugins/Bootstrap/bootstrap.css" rel="stylesheet"&gt;
  &lt;!-- your app's css --&gt;
  &lt;link href="css/index.css" rel="stylesheet"&gt;
  &lt;link href="plugins/pulltorefresh/angular-pull-to-refresh.css" rel="stylesheet"&gt;
  &lt;link href="plugins/pulltorefresh/style.css" rel="stylesheet"&gt;
  &lt;!-- angularjs scripts --&gt;
  &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/jquery/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/hammer/hammer.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/Bootstrap/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular-ui/angular-ui-router.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/angular/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/hammer/angular-hammer.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="plugins/pulltorefresh/angular-pull-to-refresh.js"&gt;        &lt;/script&gt;
  &lt;/head&gt;  
  
   &lt;body ng-view ng-class="{headerMargin: isHeaderAvailable,footerMargin: isFooterAvailable,datePickeMargin: hasDatePicker}"&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p><strong>Below is the pulltorefresh.html</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
   &lt;ul class="list-group list-group-table" pull-to-refresh="onReload()"&gt;
      &lt;li class="list-group-item" ng-repeat="state in states" ng-bind="state"&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please let me know if i missed to include something. 
  Should I need to include any other js files or images?
  I am not getting to know from <a href="https://github.com/mgcrea/angular-pull-to-refresh" rel="nofollow">https://github.com/mgcrea/angular-pull-to-refresh</a>. </p>