I'm new, meaning this is my first hour with AngularJS. I'm trying to get a hang of writing custom filters, and here is my first one:

angular.module('myfilters', []).
filter('addon', function(){
        alert('here');
        return function(ip){
            return ip+'-suffix';
        }
    });
angular.module('myapp', ['myfilters']);

If I try using it like so:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | addon }}</h1>

I get a whole lotta errors. So I use it like this:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | filter:addon }}</h1>

No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?

Errors:

Error: Unknown provider: addonFilterProvider <- addonFilter
at Error (<anonymous>)...blah blah file path

I'm new, meaning this is my first hour with AngularJS. I'm trying to get a hang of writing custom filters, and here is my first one:

http://jsfiddle.net/rutwick/UJTdb/

angular.module('myfilters', []).
filter('addon', function(){
        alert('here');
        return function(ip){
            return ip+'-suffix';
        }
    });
angular.module('myapp', ['myfilters']);

If I try using it like so:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | addon }}</h1>

I get a whole lotta errors. So I use it like this:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | filter:addon }}</h1>

No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?

Errors:

Error: Unknown provider: addonFilterProvider <- addonFilter
at Error (<anonymous>)...blah blah file path

I'm new, meaning this is my first hour with AngularJS. I'm trying to get a hang of writing custom filters, and here is my first one:

angular.module('myfilters', []).
filter('addon', function(){
        alert('here');
        return function(ip){
            return ip+'-suffix';
        }
    });
angular.module('myapp', ['myfilters']);

If I try using it like so:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | addon }}</h1>

I get a whole lotta errors. So I use it like this:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | filter:addon }}</h1>

No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?

I'm new, meaning this is my first hour with AngularJS. I'm trying to get a hang of writing custom filters, and here is my first one:

angular.module('myfilters', []).
filter('addon', function(){
        alert('here');
        return function(ip){
            return ip+'-suffix';
        }
    });
angular.module('myapp', ['myfilters']);

If I try using it like so:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | addon }}</h1>

I get a whole lotta errors. So I use it like this:

<input type="text" ng-model="sometext" />
<h1>{{ sometext | filter:addon }}</h1>

No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?

Errors:

Error: Unknown provider: addonFilterProvider <- addonFilter
at Error (<anonymous>)...blah blah file path