Passing a variable into a function - AngularJS

Question

I have the following html:

<button id="capIt" class="preview" ng-click="saveCaption('{{ user_id }}')">
 <i class="fa fa-floppy-o"></i> Save It!
</button>

Which, when inspected in the DOM, translates to e.g. this:

<button id="capIt" class="preview" ng-click="saveCaption('123')">
 <i class="fa fa-floppy-o"></i> Save It!
</button>

I have a function inside my controller:

capApp.controller('mainController', 
 ['$scope', '$http', '$rootScope', '$location', 
 function($scope, $http, $rootScope, $location) {
 $scope.saveCaption = function(user_id) {
 console.log('clicked '+user_id);
 // plus other stuff but that's irrelevant
 }
 }]);

But when the button is clicked what I see in the console is this:

clicked {{ user_id }}

Why is the code correct in the DOM but the function is getting {{ user_id }} instead of 123?

Answer 1

Just pass user_id instead of {{user_id}}

Your variable is in scope, so any value will be picked up directly.

Answer 2

You don't need to scape user id as you are already in "code".

Try:

<button id="capIt" class="preview" ng-click="saveCaption(user_Id)">
 <i class="fa fa-floppy-o"></i> Save It!
</button>