Extending built-in directives

by RajamohanShilpa A

HTML

<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="controller">
        <button ng-click="order('name')">Order by Ascending</button>
        <button ng-click="orderAsc('name')">Order by Descending</button>
        
        <ul>
            <li ng-repeat="item in testData | fltOrderBy:'name'">
                {{item.name}}
            </li>
        </ul>
        <ul>
            <li ng-repeat="item in testData | fltOrderBy:'name':true">
                {{item.name}}
            </li>
        </ul>        
    </div>
</div>

JavaScript

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

myApp.controller('controller', ['$scope','$filter' ,function ($scope,$filter) {    
    $scope.testData = 
        [{name: "101"},{name: "1012"},{name: "105"},
        {name: "115"},{name: "111"},{name: "113"},
        {name: "127"},{name: "125"},{name: "124"},
        {name: "1010"},{name: "102"},{name: "1011"},
        {name: "103"},{name: "110"},{name: "104"}];           
}]).filter('fltOrderBy',["$filter",function($filter){
    return function(data,predicate,reverse){
        angular.forEach(data,function(item){
             return item._sortID= parseInt(item[predicate]);
         });
        return $filter('orderBy')(data, '_sortID',reverse);
    }
}]);