Must not display more when I get data from database

I get the number of news from the database, but for example when I max limit of news such that I receive 24 news in total, then the tag "download more news"¨

Everything plays as it should, but it must just get away such that one can not "download more news" button.

Just to show you can not download more news

Index.Html

<div class="col-md-12" ng-app="NewsLoad" ng-controller="ListNews">
        <ul class="team-list sort-destination">
            <li class="col-md-4 col-sm-6 col-xs-12 isotope-item leadership" ng-repeat="New in Newslist | limitTo: totalDisplayed" style="max-height:380px; float:left;">
                @*html here*@
            </li>
        </ul>

        <div class="form-group col-md-12" style="margin-top:23px;">
            <button class="btn-block btn btn-info" ng-click="change()">Download more news</button>
        </div>
    </div>

Load.js

var app = angular.module('NewsLoad', []);
app.controller('ListNews', function ($scope, $http) {

    $scope.totalDisplayed = 9;

    $scope.change = function () {
        $scope.totalDisplayed += 6;
    }

    var url = "/Nyheder/all";

    $http.get(url).success( function(response) {
        $scope.Newslist = response; 
    });

})

Try the ng-show expression as below:

<div class="col-md-12" ng-app="NewsLoad" ng-controller="ListNews">
        <ul class="team-list sort-destination">
            <li class="col-md-4 col-sm-6 col-xs-12 isotope-item leadership" ng-repeat="New in Newslist | limitTo: totalDisplayed" style="max-height:380px; float:left;">
                @*html here*@
            </li>
        </ul>

        <div class="form-group col-md-12" style="margin-top:23px;">
            <button class="btn-block btn btn-info" ng-click="change()" 
               ng-show="totalDisplayed &lt; Newslist.length">
               Download more news</button>
        </div>
    </div>