Solution for http://stackoverflow.com/questions/14999273/angularjs-filter-callback


angular.module('myApp', ['myApp.directives', 'myApp.filters'])
    .controller('MyController', 
    ['$scope', 
     function ($scope) {
       $scope.names = ['Joe', 'Al', 'John', 'Adam', 'Kevin', 'James', 'Patrick', 'Frankenstein'];
       $scope.addMore = function(){
         $scope.names.push($scope.name);
         console.log($scope.names);
       };
       $scope.name = '';
     }
    ]
 );

angular.module('myApp.directives', [])
    .directive('myPlugin',
      function($timeout){
        return {
          link: function($scope, $element){
            $scope.$watch('names', function(){
              $element.appendText((new Date()).getTime());
            });
          }
        };
      }
    );

angular.module('myApp.filters', [])
    .filter('excludeLongNames',
      function(){
        // Exclude names which are longer than max characters
        return function(input, max){
          var valid = [];
          for(var k = 0, i = 0; i < 1000000; i++){
            k++;
          }
          
          $.each(input, function(i, item){
            if(item.length <= parseInt(max, 10)){
              valid.push(item);
            }
          });
          return valid;
        };
      }
    );


// Sample jQuery plugin
(function($){
  $.fn.appendText = function(text) {
    return $(this).each(function(){
      $(this).text($(this).text()+' '+text);
    });
  };
})(jQuery);

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Call jquery plugin after angularJS DOM update</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  </head>
  
  <body ng-app="myApp">
    <h1>Sample</h1>
    
    <div ng-controller="MyController">
      Name: <input ng-model="name">
      <button ng-click="addMore()">Add</button>
      <br>
      <ul>
        <li my-plugin ng-repeat="name in names | excludeLongNames:10">
          {{name}}
        </li>
      </ul>
    </div>
    
    <script src="main.js"></script>
  </body>
  
</html>