Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
    <h3>Test App</h3>
    <div ng-controller='MyCtrl'>
      <h2>{{array | slice:0:5}}</h2>
      <array-display array="array"></array-display>
      <array-display array="array" from="0" to="5"></array-display>
    </div>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('arrayDisplay', function($parse, $filter){
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        scope: {array: '=', from: '=', to:'='},
        template: '<span>{{array}}<span>after the filter is applied : {{filtered}}</span></span>',
        link: function(scope, element, attrs){
        	scope.filtered = $filter('slice')(scope.array, scope.from, scope.to);
        }
    }
 });
    
demo.filter('slice', function() {
	return function(input, from, to) {
 		return input.slice(from, to);  
  };
})

function MyCtrl ($scope) {
    $scope.array = [1,2,3,4,5,6,7,8,9,10];   
    
};