title: AngularJs - Use custom filter inside directive controller
body: <p><strong>Scenario</strong> <br>
  I have an array of users containing information about them, I do an <code>ng-repeat</code> combined with a custom directive that generates an HTML user card, keeping the scope of each card relative to the individual user, inside the user model there is a value that I need to filter with a custom filter before the template gets compiled, because if I do it inside the template the time it takes to be filtered makes the tooltip not to show until the value is ready and that looks as if something is not working.</p>
  
  <p><strong>My code so far</strong></p>
  
  <pre><code>// userCard directive
  angular.module('userCard', []).directive('UserCard', function() {
    return {
      restrict: 'EA',
      templateUrl: 'userCard.tpl.html',
      scope: {
          user: '='
      },
      controller: ['$scope', 'fromNowFilter', function($scope, fromNowFilter) {
  
          angular.forEach($scope.user.reminders, function(reminder) {
              reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
          });
      }],
      link: function(scope, element) {
          // Add the base class to the user card element
          element.addClass('user-card');
      }
    };
  });
  
  
  // fromNow custom filter
  angular.module('userCard').filter('fromNow', function() {
    return function(date) {
      return moment(date).fromNow();
    };
  });
  
  
  // The error I keep getting
  Unknown provider: fromNowFilterProvider &lt;- fromNowFilter
  </code></pre>