ng-disabled not working with $scope variable

Question

I am trying something like this -

<button class="btn btn-lg btn-block btn-section"
     ng-disabled="{{ selectedfruits.length }} < 5" > Show selected fruits</button>

In chrome developers tool the source looks like this

<button class="btn btn-lg btn-block btn-section" 
    ng-disabled="0 < 5">
        Show selected fruits</button>

But the button is not disabled,my controller looks like this -

.controller('fruitSelectorController',
     function ($scope, $rootScope, $timeout) { 
    $scope.fruits = ['a', 'b', 'c', 'd', 'e'];
                $scope.selectedfruits = [];
    });

Answer 1

You need to write without interpolation {{ }}. It will automatically parse the content and use the expression

ng-disabled="selectedfruits.length < 5"

See the Documentation

Answer 2

You should remove the curly braces from ng-disabled. No need evaluate the array in the view HTML. The scope variable automatically evaluated and angular has great feature which is two way binding, so automatically view will be updated.

<button class="btn btn-lg btn-block btn-section" ng-disabled=" selectedfruits.length  < 5" > Show selected fruits</button>