title: AngularJS function doesn't run
body: <p>I have the following angular factory and controller.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("carForm", []);
  
  app.factory("dataService", ['$http', function getData($http) {
      function getCars(){
          return $http({
              method: 'GET',
              url: '/data.json'
          }).then(function (response){
              console.log(response.data);
              return response.data
          },function (error){
              console.log("product error");
          })
      };
      return { getCars : getCars }
  }]);
  
  app.controller("dataSort", ['dataService', '$scope', function(dataService, $scope) {
      dataService.getCars().then(function(response){
          cars = response;
  
          $scope.make = [];
          for (key in cars){
              item = cars[key];
              console.log(item);
              $scope.make.push(item);
          }
  
          $scope.model = [];
          for (key in cars[$scope.selectMake]){
              item = cars[item][key_2]
              $scope.model.push(item)
          }
      })
  
      search = function(cars){
          cars[$scope.selectMake][$scope.selectModel][$scope.selectType]
      }
  
  
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-12" ng-contoller="dataSort"&gt;
    &lt;div class="row" style="text-align: center;"&gt;
      &lt;div class="form-group col-6"&gt;
        &lt;label for="inputState"&gt;Make&lt;/label&gt;
        &lt;select id="inputState" class="form-control"&gt;
          &lt;option ng-model="selectMake" selected&gt;Select make&lt;/option&gt;
          &lt;option ng-repeat="item in make"&gt;{{ item }}&lt;/option&gt; 
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="form-group col-6"&gt;
        &lt;label for="inputState"&gt;Model&lt;/label&gt;
        &lt;select id="inputState" class="form-control"&gt;
          &lt;option ng-model="selectModel" selected&gt;Select model&lt;/option&gt;
          &lt;option ng-repeat="item in model"&gt;{{ model }}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="form-group col-3"&gt;
        &lt;label for="inputState"&gt;Type&lt;/label&gt;
        &lt;select id="inputState" class="form-control"&gt;
          &lt;option ng-model="selectType"selected&gt;Select make type&lt;/option&gt;
          &lt;option ng-repeat="item in type"&gt;{{ model }}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't believe either factory or controller are running. Nothing is logged in console, neither the data or the error message. Angular is properly linked to my form as there is no {{ }} also the ng app is declared at the top of the html in the body tag using ng-app="carForm". The JS page is correctly linked to the html as when I console.log outside the angular function it prints. Angular is loaded before my JS script in the head tag, I cant figure out what I'm doing wrong.</p>