AngularJS: Problems with Binding in eventhandlers inside of ng-repeat

I'm trying to display buttons for choosing a username with ng-repeat. The display is OK. But every button in the loop has a ng-click directive with a binding. This is also displayed correct in Google Chromes DOM-Explorer. But when one of the buttons is clicked the eventhandling function login() has {{user.userId}} as input instead the value of the parameter.

I'm trying to display buttons for choosing a username with ng-repeat. The display is OK. But every button in the loop has a ng-click directive with a binding. This is also displayed correct in Google Chromes DOM-Explorer. But when one of the buttons is clicked the eventhandling function login() has {{user.userId}} as input instead the value of the parameter.

Hers my code:

<div class="cell large-3" ng-repeat="user in userData()" ng-class="{'large-offset-1': ($index % 3) != 0}">
      <button ng-click="login('{{user.ID}}')" class="button expanded red bigButton"> {{user.userName}} </button>
    </div>

Cntrl:

(function () {
'use strict';
angular.module('app').controller('loginCntrl', ['$scope', '$controller', '$location','dataService', 'mainService', initLoginCntrl]);
function initLoginCntrl($scope, $controller,$location, dataService, mainService) {
  angular.extend(this, $controller('baseCntrl', {
            $scope: $scope
        }));

$scope.userData = dataService.getUserData;

$scope.login = function(userID) { <-- input of userid is {{userData.ID}} instead of the eal userID from Binding
mainService.login(userID);
}
}

})();

Thanks for your help in advance!

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

What are the differences? Do they each have specific use contexts?