title: I keep getting JSONFilterProvider <- JSONFilter Unpr Angular error and I don't know why
body: <p>Here's my code for what I'm doing:</p>
  
  <pre><code>&lt;!-- underscore --&gt;
      &lt;script src="js/underscore.js/underscore.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- Scripts --&gt;
      &lt;script src="js/bootstrap/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery/jquery.mixitup.min.js"&gt;&lt;/script&gt;
      &lt;!-- Angular --&gt;
      &lt;script src="js/angular/app.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/controllers/controllers.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/directives/directives.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/services/data-service.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The code above is located at the bottom. </p>
  
  <p>This is the error I'm getting in the Google </p>
  
  <p>Error: [$injector:unpr] Unknown provider: JSONFilterProvider &lt;- JSONFilter
      <a href="http://errors.angularjs.org/1.4.2/" rel="nofollow">http://errors.angularjs.org/1.4.2/</a>$injector/unpr?p0=JSONFilterProvider%20%3C-%20JSONFilter
      at REGEX_STRING_REGEXP (<a href="http://localhost/website/js/angular/angular.js:68:12" rel="nofollow">http://localhost/website/js/angular/angular.js:68:12</a>)
      at <a href="http://localhost/website/js/angular/angular.js:4264:19" rel="nofollow">http://localhost/website/js/angular/angular.js:4264:19</a>
      at Object.getService [as get] (<a href="http://localhost/website/js/angular/angular.js:4411:39" rel="nofollow">http://localhost/website/js/angular/angular.js:4411:39</a>)
      at <a href="http://localhost/website/js/angular/angular.js:4269:45" rel="nofollow">http://localhost/website/js/angular/angular.js:4269:45</a>
      at Object.getService [as get] (<a href="http://localhost/website/js/angular/angular.js:4411:39" rel="nofollow">http://localhost/website/js/angular/angular.js:4411:39</a>)
      at $get (<a href="http://localhost/website/js/angular/angular.js:18091:24" rel="nofollow">http://localhost/website/js/angular/angular.js:18091:24</a>)
      at isStateless (<a href="http://localhost/website/js/angular/angular.js:12956:12" rel="nofollow">http://localhost/website/js/angular/angular.js:12956:12</a>)
      at findConstantAndWatchExpressions (<a href="http://localhost/website/js/angular/angular.js:13013:33" rel="nofollow">http://localhost/website/js/angular/angular.js:13013:33</a>)
      at <a href="http://localhost/website/js/angular/angular.js:12967:7" rel="nofollow">http://localhost/website/js/angular/angular.js:12967:7</a>
      at forEach (<a href="http://localhost/website/js/angular/angular.js:336:20" rel="nofollow">http://localhost/website/js/angular/angular.js:336:20</a>) </p>
  
  <p>I'm using angular-ui-router.js vice ng-Route.</p>
  
  <p>The problem is, NOWHERE in the code am I referencing JSONFilter...  </p>
  
  <p>The error appears here in angular.js on line: 12321</p>
  
  <pre><code>// The reason behind this is that console.log has type "object" in IE8...
    try {
      hasApply = !!logFn.apply;
    } catch (e) {}
  
    if (hasApply) {
      return function() {
        var args = [];
        forEach(arguments, function(arg) {
          args.push(formatError(arg));
        });
        return logFn.apply(console, args);
      };
    }
  </code></pre>
  
  <p>I'm not using IE8 and never use internet Exploder or now, edge which immediately let in viruses. I dumped it on WINDOWS 10.</p>
  
  <p>Back on point. Any clue where this is coming from or how I'm getting it?</p>
  
  <p>BTW here's my app.js file:</p>
  
  <pre><code>/* global angular */
  
  // Code goes here
  var myApp;
  myApp = angular.module("myApp", [
      "ui.router"
  
  ]);
  
  
  myApp.config(function ($sceDelegateProvider) {
  
      $sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
  
  
  });
  myApp.config(function ($stateProvider, $urlRouterProvider) {
  
      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("home");
  
      $stateProvider
              .state('home', {
                  url: "/home",
                  views: {
                      "mainHeader": {
                        templateUrl: "templates/mainHeader.html"  
  
                      },
                      "mainNav": {
                        templateUrl: "templates/mainNav.html"  
  
                      },
                      "mainContent": {
                          templateUrl: "templates/home.html"
  
                      },
                      "mainFooter": {
                          templateUrl: "templates/mainFooter.html"
  
                      },
                      "homeDetails": {
                          templateUrl: 'templates/home-details.html'
  
                      }
  
                  }
  
              })
              .state('about', {
                  url: "about",
                  views: {
                      "mainAbout": {
                          templateUrl: "templates/about.html"
                      },
                      "aboutDetails": {
                          templateUrl: 'templates/about-details.html'
  
                      }
                  }
  
              });
  });
  
  console.log("Host name is: " + document.location.hostname);
  
  if (document.location.hostname === "localhost") {
      myApp.constant('URL', '/website/js/json/');
  } else if (document.location.hostname === "website.net" || "www.website.net") {
      myApp.constant('URL', '/js/json/');
  } else {
      myApp.constant('URL', '/website/js/json/');
  }
  
  
  //Registering the company for the key achievements
  //This defines and initializes a value service called company and assigns it an 
  //object with some default values.
  
  myApp.constant("nbrCompanies", {
      nbr: 0
  });
  myApp.constant("nbrSites", {
      nbr: 0
  });
  myApp.constant("nbrSkills", {
      nbr: 0
  });
  </code></pre>
  
  <p>Thanks for your help...</p>
  
  <p>UPDATE: Here's the  that contains the ui-views</p>
  
  <p></p>
  
  <pre><code>    &lt;div class="container" ng-controller="homeController as ctrlHome"&gt;
          &lt;!-- Nav UI View --&gt;
          &lt;nav id="mainbar" class="hidden-xs" ui-view="mainNav"&gt;&lt;/nav&gt;
          &lt;!-- Nav UI View --&gt;
          &lt;div id="wrap"&gt;
              &lt;!-- injected header content --&gt;
              &lt;div id="header" ui-view="mainHeader"&gt;&lt;/div&gt;
              &lt;!-- injected main content --&gt;
              &lt;div id="bodyStuff" ui-view="mainContent"&gt;&lt;/div&gt;
              &lt;!-- End of Injected Content--&gt;
              &lt;!-- Detail View --&gt;
              &lt;div class="details" ui-view="homeDetails"&gt;&lt;/div&gt;
              &lt;!-- End Detail View --&gt;  
          &lt;/div&gt; &lt;!-- wrap --&gt;
          &lt;footer id="footer" ui-view="mainFooter"&gt;&lt;/footer&gt;
      &lt;/div&gt; &lt;!-- container --&gt;
      &lt;!-- underscore --&gt;
      &lt;script src="js/underscore.js/underscore.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- Scripts --&gt;
      &lt;script src="js/bootstrap/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Angular --&gt;
      &lt;script src="js/angular/app.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/controllers/controllers.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/directives/directives.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/angular/services/data-service.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>