title: AngularJS Unknown Provider (filterProvider) error
body: <p>The two script statements below work independently however when they are combined it causes <strong>Error: [$injector:unpr] Unknown provider: searchNameFilterProvider &lt;- searchNameFilter</strong> Can anyone explain why this occurs?</p>
  
  <p>1st segement</p>
  
  <pre><code>Find Person: &lt;input type="text" ng-model="myName"&gt;
      &lt;ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']"&gt;
          &lt;li ng-repeat="person in people | filter:myName"&gt;{{ person | searchName}}&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;script&gt;
          var app = angular.module('myApp',[]);
          app.filter('searchName',function(){
              return function (input){
                  return input + '!';
              }
          })
      &lt;/script&gt;
  </code></pre>
  
  <p>2nd segement</p>
  
  <pre><code>&lt;div ng-controller="myCtrl"&gt;
      &lt;button ng-click="myFunc()"&gt;Hello World Button&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var app = angular.module('myApp',[]);
      app.controller('myCtrl',function ($scope) {
  
          $scope.myFunc = function () {
             console.log('Hello world!');
          };
      });
  
  &lt;/script&gt;
  </code></pre>