Angular ng-repeat with filter not updating with http.get

Question

I am filtering an array (results) with a query. By removing the filter, results accurately displays all elements. By removing the http.get that updates results and initializing results to contain elements, the filter accurately filters.

With both the filter and the http.get updating results, the message for no results is showing even when results contains data. I have verified that results is properly updated by the http.get (as evidenced by {{results}} showing correctly below). The following is what {{results}} displays:

[
  {
    "name": "Company Number 1 ",
    "description": "description of 1 "
  },
  {
    "name": "Company Number 1 ",
    "description": "description of 1 "
  },
  {
    "name": "Company Number 2 ",
    "description": "description of 2 "
  }
]

index.html

<div class="form-group label-floating">
    <label class="control-label" for="addon1">Filter</label>
    <input id="addon1" class="form-control" type="text" data-ng-model="query">
</div>

{{results}} <!--This works properly-->

<table class="table table-striped" id="resultsTable">
    <tbody>
    <tr data-ng-show="resultsFilter.length === 0">
        <td class="center" colspan="3">No results found.</td> <!--This message appears even when results should have elements-->
    </tr>
    <tr data-ng-repeat="result in resultsFilter = (results | filter:query | limitTo:displayNum) track by result.name">
        <td>
            <button class="btn btn-primary btn-block">
                {{result.name}}
            </button>
        </td>
    </tr>
    </tbody>
</table>

angular.js

$scope.query = "";
$scope.displayNum = 20;
$scope.results = [];
...
$scope.updateResults = function () {
    $http({
    method: "GET",
    url: requestUrl,
    params: {id: $scope.identifierInHierarchy.companyId}
})
    .then(function successCallback(response) {
        $scope.query = "";
        $scope.results = [];
        response.data.forEach(function (entry) {
            $scope.results.push({
                name: "Company Number " + entry.CompanyNumber,
                description: "description of " + entry.CompanyNumber
            });
        });
    },
        function errorCallback(response) {
        });
}

Update: No, changing resultsFilter to results does not resolve the issue. I also believe it is not incorrect since keeping resultsFilter and initializing results statically will filter correctly (as previously stated).

Answer 1

You are using resultsFilter everywhere which is no where declared. It should be results.

<table class="table table-striped" id="resultsTable">
<tbody>
<tr data-ng-show="{{results.length}} === 0">
    <td class="center" colspan="3">No results found.</td> <!--This message appears even when results should have elements-->
</tr>
<tr data-ng-repeat="result in results = (results | filter:query | limitTo:displayNum) track by result.name">
    <td>
        <button class="btn btn-primary btn-block">
            {{result.name}}
        </button>
    </td>
</tr>
</tbody>

Answer 2

It's showing no result because of this

<tr data-ng-show="resultsFilter.length === 0">
        <td class="center" colspan="3">No results found.</td> <!--This message appears even when results should have elements-->
    </tr>

resultsFilter scope is limited to ng-repeat and you are trying to access it above scope. so Please change it only with results and then test it.

Hope this helps!!