jsbin.wedaq.coffee

MyCtrl = ($scope) ->
  $scope.currentPage = 0
  $scope.pageSize = 20
  $scope.data = []
  $scope.numberOfPages = ->
    Math.ceil $scope.data.length / $scope.pageSize

  i = 0

  while i < 45
    $scope.data.push "Item " + i
    i++
  return

app = angular.module "myApp", []

#We already have a limitTo filter built-in to angular,
#let's make a startFrom filter
app.filter "startFrom", ->
  (input, start) ->
    start = +start #parse to int
    input.slice start

@MyCtrl = MyCtrl
#angular.bootstrap document, ['myApp']

jsbin.wedaq.jade

doctype html
html
head
    title JQM latest
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='http://code.jquery.com/mobile/git/jquery.mobile-git.css')
    script(src='http://code.jquery.com/jquery-1.10.2.js')
    script(src='http://code.jquery.com/mobile/git/jquery.mobile-git.js')
    script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js')
  body(ng-app='myApp')
    //
       Page 1 
    #p1(data-role='page')
      div(data-role='header', data-position='fixed')
        a(href='#about', data-rel='popup', data-position-to='window', data-role='button', data-inline='true', data-transition='flip', data-icon='info', data-theme='b') About
        h1 Header - Page 1
      div(data-role='content', ng-controller='MyCtrl')
        form.ui-filterable
          input#filterBasic-input(data-type='search')
        ul(data-role='listview', data-filter='true', data-input='#filterBasic-input')
          li(ng-repeat='item in data | startFrom:currentPage*pageSize | limitTo:pageSize') {{item}}
      div(data-role='footer', data-position='fixed')
        h1 Footer
      #about.ui-corner-all(data-role='popup', data-overlay-theme='a', data-theme='c', data-dismissible='false', style='max-width: 300px;')
        .ui-header.ui-bar-c(data-role='header')
          h1 About Author
        .ui-corner-bottom.ui-content(data-role='content', data-theme='d')
          p
            | Demonstration was created by
            b Omar
            | for
            a(href='#') StackOverflow.com
            | .
            br
            br
            | For more examples on jQuery Mobile, click the button below.
          .ui-grid-a
            .ui-block-a(style='width: 85%;')
              a(href='http://stackoverflow.com/users/1771795/omar', data-role='button', data-theme='c', data-icon='star', target='_blank') Profile
            .ui-block-b(style='width: 15%; margin-top: 9px;')
              a(href='#', data-role='button', data-icon='delete', data-iconpos='notext', data-rel='back') Close
    //
       Page 2