AngularJS function works once and then errors with object is not function

Question

I have an app that retrieves data from a zip code database. It works great until I try and get more data after already retrieving a data set, then I get an error of 'object is not a function'. The data exchange is in JSON and seems to work great until I try to select a county after having already selected one.

HTML/FrontEnd

<form ng-controller="SearchCtrl" id="search4Zips" name="search4Zips">
    <div class="state" data-ng-init="searchState()">
        <label for="stateSelection">State: </label>
        <select name="stateSelection" ng-change="searchCounty()" ng-model="keywords.state">
            <option ng-repeat="state in states" value="{{state.state}}">{{state.state}}</option>
        </select>
    </div>
    <div class="county">
        <label for="countySelection">County: </label>
        <select name="countySelection" ng-change="areaData()" ng-model="keywords.county">
            <option ng-repeat="county in counties" value="{{county.county}}">{{county.county}}</option>
        </select>
    </div>
    <div class="results" style="margin-top: 10px;">
        <button class="btn btn-primary">Add to Cart</button>
        <table style="margin-top: 10px;">
            <tr>
                <th>Use Zip Code</th>
                <th>Zip</th>
                <th>City</th>
                <th>Average Leads per Month</th>
            </tr>
            <tr ng-repeat="area in areaData" ng-model="keywords.area">
                <td><input type="checkbox" name="zips[{{area.Zip}}]" value="add"></td>
                <td>{{area.Zip}}</td>
                <td>{{area.City}}</td>
                <td>Needs Data</td>
            </tr>
        </table>
        <button class="btn btn-primary">Add to Cart</button>
        <pre style="font-size: 0.8em; line-height: 1em; margin-top: 10px;">{{result | json}}</pre>
    </div>
</form>

Controller

angular.module('app', ['components'])

.controller('SearchCtrl', function($scope, $http, $locale) {
    $scope.url = []; // The url of our search
    $scope.matches = [];
    $scope.areaData = [];

    $scope.search = function() {
        $scope.url = '/wp-content/themes/dt-the7-child/assets/search.php';

        // Create the http post request the data, holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.matches = data;
                $scope.result = data; // Show result from server in our debugging area
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
    };

    $scope.searchState = function() {
        $scope.url = '/wp-content/themes/dt-the7-child/assets/search_state.php';

        // Create the http post request the data, holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.states = data;
                $scope.result = data; // Show result from server in our debugging area
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });

        console.debug($scope.keywords);
    };

    $scope.searchCounty = function() {
        $scope.url = '/wp-content/themes/dt-the7-child/assets/search_county.php';

        // Create the http post request the data, holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords['state']}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.counties = data;
                $scope.result = data; // Show result from server in our debugging area
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });

        console.debug($scope.keywords);
    };

    $scope.areaData = function() {
        $scope.url = '/wp-content/themes/dt-the7-child/assets/search_areaData.php';

        // Create the http post request the data, holds the keywords
        // The request is a JSON request.
        $http.post($scope.url, { "data" : $scope.keywords['county']}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.areaData = data;
                $scope.result = data; // Show result from server in our debugging area
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        console.debug($scope.keywords);
    };
});

Answer 1

In your code you have areaData as function and as array. First it is an array $scope.areaData then it becomes a function $scope.areaData = function. And in this function you assign an array to the property $scope.areaData. Now the function is an array again. If you try to call this function you got your error.