Calling filter from different JS file in Controller
<p>I have a controller that was residing in a separate file named as <code>EmployeeCtrl.js</code>. Inside this controller I have a filter called <code>convertJsonDate</code> to convert <code>JsonResult date format</code> to normal format <code>MM/dd/yyyy hh:mm:ss</code>.</p>

<p>My question now is, how do I make this filter reusable in different controller in the future? I have read that you can add your filter in a separate js file <code>filters.js</code> and inject it to your controller, but I don't know to implement this.</p>

<p>TIA</p>

<p><strong>app.js</strong></p>

<pre><code>(function () {
'use strict';

angular.module('app', []);
})();
</code></pre>

<p><strong>EmployeeCtrl.js</strong></p>

<pre><code>(function () {
'use strict';

var app = angular.module('app');

app.filter('convertJsonDate', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) ? $filter('date')(parseInt(input.substr(6)), format) : '';
    };
}]);

app.controller('app.EmployeeController', ['$scope', 'app.EmployeeService', function ($scope, EmployeeService) {

    GetAllEmployee();

    $scope.sortColumnBy = function (keyname) {
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    }

    $scope.employee = {
        employeeId: '',
        firstName: '',
        lastName: '',
        password: '',
        daysPerWeek: 0,
        active: true,
        departmentId: 0,
        accountTypeId: 0
    };

    $scope.clear = function () {
        $scope.employee.employeeId = '';
        $scope.employee.firstName = '';
        $scope.employee.lastName = '';
        $scope.employee.password = '';
        $scope.employee.daysPerWeek = 0;
        $scope.employee.active = false;
        $scope.employee.departmentId = 0;
        $scope.employee.accountTypeId = 0;
    };

    function GetAllEmployee() {
        var getEmployeeData = EmployeeService.getEmployees();

        getEmployeeData.then(function (employee) {
            $scope.employees = employee.data;
        }, function () {
            alert('Error in getting employee records');
        });
    };  
}]);

})();
</code></pre>

<p><strong>Using convertJsonDate filter</strong></p>

<pre><code>&lt;div ng-app="app"&gt;
&lt;div ng-controller="app.EmployeeController"&gt;
     .....
     &lt;tbody&gt;
        &lt;tr ng-repeat="e in employees | orderBy:sortKey:reverse | filter:searchKeyWord"&gt;
             &lt;td&gt;{{e.AccountDateExpired | convertJsonDate:'MM/dd/yyyy hh:mm:ss'}}&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
     ....
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Pastebin</strong></p>

<p><strong>Index.chtml</strong>
<a href="http://pastebin.com/aXDSmYAV" rel="nofollow">http://pastebin.com/aXDSmYAV</a></p>

<p><strong>EmployeeCtrl.js</strong>
<a href="http://pastebin.com/eQhRREPy" rel="nofollow">http://pastebin.com/eQhRREPy</a></p>

<p><strong>app.js</strong>
<a href="http://pastebin.com/1GB4uhvx" rel="nofollow">http://pastebin.com/1GB4uhvx</a></p>