title: Angular JS custom filter not working
body: <p>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:</p>
  
  <p><a href="http://jsfiddle.net/rutwick/UJTdb/" rel="nofollow">http://jsfiddle.net/rutwick/UJTdb/</a></p>
  
  <pre><code>angular.module('myfilters', []).
  filter('addon', function(){
          alert('here');
          return function(ip){
              return ip+'-suffix';
          }
      });
  angular.module('myapp', ['myfilters']);
  </code></pre>
  
  <p>If I try using it like so:</p>
  
  <pre><code>&lt;input type="text" ng-model="sometext" /&gt;
  &lt;h1&gt;{{ sometext | addon }}&lt;/h1&gt;
  </code></pre>
  
  <p>I get a whole lotta errors. So I use it like this:</p>
  
  <pre><code>&lt;input type="text" ng-model="sometext" /&gt;
  &lt;h1&gt;{{ sometext | filter:addon }}&lt;/h1&gt;
  </code></pre>
  
  <p>No errors, but it doesn't work. The alert doesn't pop. Am I missing something here?</p>
  
  <p><strong>Errors:</strong></p>
  
  <pre><code>Error: Unknown provider: addonFilterProvider &lt;- addonFilter
  at Error (&lt;anonymous&gt;)...blah blah file path
  </code></pre>