<html lang="en" ng-app="myApp">

<head>

  <title>GitHub · angular-pull-to-refresh</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="//github.com/apple-touch-icon-144.png">
  <link rel="shortcut icon" href="//github.com/favicon.ico">

  <!-- Bootstrap core CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet">
  <link href="//rawgithub.com/mgcrea/angular-pull-to-refresh/master/dist/angular-pull-to-refresh.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->

</head>

<body ontouchstart="" ng-controller="AppCtrl">

  <header class="navbar navbar-default navbar-fixed-top" role="banner">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">
        <i class="fa fa-github"></i>&nbsp;angular-pull-to-refresh
      </a>
    </div>
  </header>

  <div class="content">
    <ul class="list-group list-group-table" pull-to-refresh="onReload()">
      <li class="list-group-item" ng-repeat="state in states" ng-bind="state"></li>
    </ul>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
  <script src="//rawgithub.com/mgcrea/angular-pull-to-refresh/master/dist/angular-pull-to-refresh.js"></script>
  <script src="script.js"></script>

</body>

</html>

'use strict';

angular.module('myApp', ['mgcrea.pullToRefresh']);

angular.module('myApp')

  .controller('AppCtrl', 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;
    };

  });


.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: #fff;
  -webkit-backface-visibility: none;
  -webkit-overflow-scrolling: touch;
}

.navbar-fixed-top ~ .content {
  top: 50px;
}

.list-group-table {
  margin-bottom: 0px;
}
.list-group-table .list-group-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0px;
  background: none;
  height: 45px;
}
.list-group-table .list-group-item:first-child {
  border-top-width: 0;
}