Scenario

I have an array of users containing information about them, I do an ng-repeat 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.

My code so far

// 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 <- fromNowFilter