angualrjs - filter not working on `ng-model` changes

Question

my directive filter for sorting the values works only on page load. later on ng-model changes not updating the collection as well the filter not working at all.

If you find me as wrong, please correct me updating my demo

any one help me to fix the issue?

here is my code :

app.directive("customGrid", function($timeout,$filter){
  return{
    scope:{ 
      "func":"&func",
      "pages":"=",
      "model":"=ngModel" //not updating?
    },
    template:temp.join(''),
    link : function( scope, element, attrs ){
      scope.slice = null;

      scope.sortIt = function( value ){
        console.log( value )
        scope.slice = $filter('orderBy')(value, '', true);//works on load
        $timeout(function(){
          scope.$apply();
        })
      }

      $timeout(function(){
       scope.slice = scope.pages.pin;
       scope.sortIt( scope.slice );

      })

    }
  }
})

Live Demo

Answer 1

I have updated the sample which is sorting the list on blur, the issue was with the model of the input box, we need to update the list to do the sorting.

Also you need to add type = "number" else you will have to convert to number everytime in the directive controller.

Check plunker example

var temp = [
  "<ul><li ng-repeat='(key,value) in slice track by $index'>",
  "<input ng-model=slice[key]  type='number' ng-blur=sortIt(slice) /></li></ul>"
  ]