cannot load custom-made filter , Unknown Provider error

Question

I study the book "Angular JS by example" (pp. 79-84) and in the second chapter I created a custom-made filter.

This is the js file (appModule.js)that contains all the module declarations

//root module
angular.module('app', ['ngRoute','7minWorkout']).
config(function ($routeProvider, $locationProvider, $sceDelegateProvider){
//...

//seven min workout app module
angular.module('7minWorkout', []);

This file contains the custom-made filter (filters.js)

angular.module('7minWorkout').filter('secondsToTime', function () {
//...

The only controller for the 7minWorkout module is in the workout.js

angular.module('7minWorkout').controller('WorkoutController',['$scope', '$interval','$location',function($scope, $interval,$location){
//...

and I am not using any filter inside that file

Lastly this is the view

<h4>Workout Remaining - {{workoutTimeRemaining | secondsToTime}}</h4>

I get

Error: [$injector:unpr] Unknown provider: secondsToTimeFilterProvider <- secondsToTimeFilter

I red this page , but I dont know how to proceed to fix this. Before creating the custom-made filter, I had no problems with my app. Any help?

Thanks in advance

Answer 1

Your code looks good for me.

As you separated you various component's in each file, you need to refer those file on your index.html

You must have missed to refer filter.js in your index.html