title: AngularJs - How to write custom filter inside directive controller
body: <p>I want to write filter on array inside directive controller with validation message. I am working on file upload control where user can select multiple files, once user select files I need to show all files in a table with delete option.</p>
  
  <p>I need few validations like I need to show message to user if user selects already selected attachment and file size validations.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;link href="style.css" rel="stylesheet" /&gt;
      &lt;script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;p&gt;Hello {{name}}!&lt;/p&gt;
      &lt;input type="file" ng-file-model="files" multiple /&gt;
      &lt;button type="button" ng-click="upload()"&gt;Upload&lt;/button&gt;
  
      &lt;p ng-repeat="file in files"&gt;
        {{file.name}}
        &lt;button type="button" class="btn btn-danger btn-xs" data="{{file.name}}" ng-click="remove(file.name)"&gt;
           &lt;span class="glyphicon glyphicon-trash"&gt;Remove&lt;/span&gt; 
        &lt;/button&gt;
      &lt;/p&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  
      var app = angular.module('myApp', []);
  
      app.controller('MainCtrl', function($scope) {
        $scope.name = 'World';
        $scope.files = []; 
        $scope.upload=function(){
          alert($scope.files.length+" files selected ... Write your Upload Code"); 
  
        };
        $scope.remove=function(fileName){
          alert(fileName);
          for(var i=0;i&lt;$scope.files.length;i++) {
                  if($scope.files[i].name === fileName) {
                      $scope.files.splice(i,1);
                      break;
                  }
              }
         // $scope.files.splice(0,1);
          console.log($scope.files[0]._file);
          console.log($scope.files.length);
        };
      });
  
  
     app.directive('ngFileModel', ['$parse', function ($parse) {
              return {
                  restrict: 'A',
                  link: function (scope, element, attrs) {
                      var model = $parse(attrs.ngFileModel);
                      var isMultiple = attrs.multiple;
                      var modelSetter = model.assign;
                      var values = [];
                      element.bind('change', function () {
                          angular.forEach(element[0].files, function (item) {
                              var value = {
                                 // File Name 
                                  name: item.name,
                                  //File Size 
                                  size: item.size,
                                  //File URL to view 
                                  url: URL.createObjectURL(item),
                                  // File Input Value 
                                  _file: item
                              };
                              values.push(value);
                          });
                          scope.$apply(function () {
                              if (isMultiple) {
                                  modelSetter(scope, values);
                              } else {
                                  modelSetter(scope, values[0]);
                              }
                          });
                      });
                  }
              };
          }]);
  </code></pre>
  
  <p>In above code I want to inject filter for duplicate checking when I am pushing file data to files object.</p>
  
  <p>Please guide me best way to achieve this.</p>
  
  <p>Thanks in advance</p>