Angular Latest: Empty Fiddle

http://angularjs.org/

by codef0rmer

HTML

<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
    <div id="wrapper" iscroll data-collection="movies" data-scrollbars="true" data-mousewheel="true">
    <div>
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="movie in movies">
          <button type="button" class="close" ng-click="movies.splice($index, 1)">&times;</button>
          <span ng-bind="movie"></span>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

#wrapper {
    width: 280px;
    height: 202px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -140px;
    margin-top: -101px;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.movies = [
        'Her', 
        'Amazing Spiderman 3D', 
        'Silicon Valley HBO', 
        'Anchorman 2', 
        '300 Rise of an Empire', 
        'The Hobbit The Desolation of Smaug', 
        'Fandry', 
        '12 Years a Slave', 
        'Frozen', 
        'Ender`s Game', 
        'Gravity', 
        'Riddick', 
        'Jobs', 
        'The Hobbit The Unexpected Journey', 
        'Man of Steel', 
        'Turbo', 
        'After Earth', 
        'Europa Report', 
        'Forest Gump', 
        'Now You See Me'
    ];
});

myApp.directive('iscroll', function() {
    return {
        restrict: 'EAC',
        scope: {
            scrollbars: '=?',
            mousewheel: '=?',
            collection: '='
        },
        link: function(scope, element, attrs) {
            var myScroll = null;
            
            scope.$watchCollection('collection', function() {
                if (myScroll) {
                    myScroll.refresh();
                    deregister();
                } else {
                    myScroll = new IScroll(element[0], {
                        scrollbars: angular.isDefined(scope.scrollbars) ? scope.scrollbars : true,
                        mouseWheel: angular.isDefined(scope.mousewheel) ? scope.mousewheel : true
                    });
                }
            });
            
            var deregister = scope.$watch(function() {
            if (myScroll) {
              myScroll.refresh();
            } else {
              myScroll = new IScroll(element[0], {
                scrollbars: angular.isDefined(scope.scrollbars) ? scope.scrollbars : true,
                mouseWheel: angular.isDefined(scope.mousewheel) ? scope.mousewheel : true
              });
            }
          });
        }
    }
});