title: AngularJS Error: [$controller:ctrlreg] Controller is not registered
body: <p>StackOverflow Peeps,</p>
  
  <p>I'm having a bit of an issue with the error referenced in the title. I've scoured AngularJS documentation, previously written code, and existing StackOverflow question/answers, all to no avail. To start, here is a previously written Angular controller that works correctly:</p>
  
  <p><a href="https://i.stack.imgur.com/xGGZb.png" rel="nofollow noreferrer">Correct, functioning controller</a></p>
  
  <p><img src="https://i.stack.imgur.com/xGGZb.png" alt=""></p>
  
  <p>And here is the malfunctioning controller:</p>
  
  <p><a href="https://i.stack.imgur.com/d2hkn.png" rel="nofollow noreferrer">Malfunctioning controller</a></p>
  
  <p><img src="https://i.stack.imgur.com/d2hkn.png" alt=""></p>
  
  <p>What is particularly frustrating is that I quite literally copied my code from the functioning Angular controller ("focus_groups_ctrl") into my new controller ("agencies_ctrl"), and simply updated the variable/argument names to reflect this. What am I missing here? The JSON data being rendered in api/v1/agencies is working correctly, and my HTML page is being correctly "wrapped" in ng-app and ng-controller attributes. Please let me know, and feel free to ask away! Thanks!</p>
  
  <p>Here is the malfunctioning code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>/* global angular */
  
  (function() {
    "use strict";
  
    angular.module("app", ["ngAnimate"]).controller("agencies_Ctrl", function($scope, $http) {
      $scope.setup = function() {
        $http.get('/api/v1/agencies' + window.location.search).then(function(response) {
          $scope.agenciesOffset = 0;
          $scope.agenciesCount = 5;
          $scope.agencies = response.data;
          console.log($scope.agencies);
        });
      };
      var i = 5;
      $scope.nextLoad = function() {
        $scope.agenciesOffset = i;
        i += 5;
      };
    });
  }());
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  
  
  <p>And here is the functioning code:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>/* global angular */
  
  (function() {
    "use strict";
  
    angular.module("app", ["ngAnimate"]).controller("focus_groups_Ctrl", function($scope, $http) {
      $scope.setup = function() {
        $http.get('/api/v1/focus-groups' + window.location.search).then(function(response) {
          $scope.focusGroupOffset = 0;
          $scope.focusGroupCount = 5;
          $scope.focusGroups = response.data;
          console.log($scope.focusGroups);
        });
      };
      var i = 5;
      $scope.nextLoad = function() {
        $scope.focusGroupOffset = i;
        i += 5;
      };
    });
  }());
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  </code></pre>