title: AngularJS: $injector:unpr error when using ngAnimate
body: <p>I am trying to add <code>ngAnimate</code> to my angular app dependencies. Here is my angular app file:</p>
  
  <pre><code>var carApp = angular.module("carApp", ["ngAnimate"]);
  </code></pre>
  
  <p>Here is my <code>TableBodyCtrl</code> controller:</p>
  
  <pre><code>carApp.controller("TableBodyCtrl", function($scope, $http){
      $scope.loading = false;
      ...
  });
  </code></pre>
  
  <p>Here is my <code>TablePanelCtrl</code>:</p>
  
  <pre><code>carApp.controller("TablePanelCtrl", function(){
      this.tab = 1;
      ...
  });
  </code></pre>
  
  <p>My controller are in different files in the <code>controller</code> folder.</p>
  
  <p>Here is the script loads of angular libraries:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/angular-animate.min.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>Here is the script load of my angular app file:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/carApp.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the script loads of my controllers:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/controllers/TablePanelCtrl.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controllers/TableBodyCtrl.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I run my web-app I get this error:</p>
  
  <pre><code>Unknown provider: $$qProvider &lt;- $$q &lt;- $animate &lt;- $compile
  
  https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile
  </code></pre>
  
  <p>This error only started to show up after I add <code>"ngAnimate"</code> to my angular app dependencies.</p>
  
  <p><strong>How can I fix that?</strong></p>