AngularJS how to bind select value in a ng-repeat directive?

Issue

currently struggling with a thing that I thought would be easy... I'm trying to update a value in a ng-repeat directive using a select dropdown.

Here is what the HTML looks like:

<div ng-repeat="groupeQuestions in questionnaire.GroupesQuestions" class="umb-group-builder__group">                          
    <select ng-model="groupeQuestions.TypeQuestionId" ng-options="value.Id as value.Description for value in typesQuestions ">                             
    </select>
    <input type="text" ng-model="groupeQuestions.TypeQuestionId"/>
    <button ng-click="saveGroupeQuestions({{groupeQuestions}})" >Sauvegarder</button>
    <button ng-click="deleteGoupeQuestions({{groupeQuestions.Id}})" >Supprimer</button>
</div>

And here is the js controller function used to update the item :

$scope.saveGroupeQuestions = function (groupeQuestions) {
    console.log(groupeQuestions);
    surveyPluginResource.saveGroupeQuestions(groupeQuestions).then(function (response) {
        $scope.questionnaire = response.data;
        navigationService.syncTree({ tree: 'survey', path: [-1, -1], forceReload: true }).then(function (syncArgs) {
            navigationService.reloadNode(syncArgs.node);
        });
    });
};

Somehow, I'm missing something with the binding thing, because if I change the value in the dropdown, the textbox is updating as well.

But when it reaches the controller, the console.log() displays the item which does not contain the new groupeQuestions.TypeQuestionId.

I'm new to js and angularJs too, so is there something on binding that I've missed?

Solution

Don't use {{}} interpolation when passing a scope variable to a function

<button ng-click="saveGroupeQuestions(groupeQuestions)" >Sauvegarder</button>
<button ng-click="deleteGoupeQuestions(groupeQuestions.Id)" >Supprimer</button>

Answered By - charlietfl