how to get the unique id of array element on click through angularjs from firebase database

Question

HTML: 
 <div ng-controller="getIdController">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <hr />
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Gender</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="user in userData">
                                <td> {{ user.name }} </td>
                                <td> {{ user.age }} </td>
                                <td> {{ user.gender }} </td>
                                <td><button class="btn btn-warning" ng-click="getObjectId()">Get Id</button></td>
                            </tr>
                        </tbody>
                    </table> 
                </div>
            </div>   
        </div>   
</div>

App Js:

var crudApp = angular.module('crudApp', ['firebase']);
crudApp.controller('getIdController', ['$scope', '$firebaseArray', function($scope, $firebaseArray){

    var ref = new Firebase('https://blistering-fire-4719.firebaseio.com/users');

    $scope.userData = $firebaseArray(ref);    

    $scope.getObjectId = function(){

        $scope.userData.$loaded()
            .then(function(id){ 

            var obj = id;

            console.log(obj);          

        });
    }   
}]);

Explanation:

Ok here In firebase i have User table and it has 3 objects each with unique id. Currently I am trying to extract the unique id for object on click of Get Id button in html. But the problem is if I do console.log(id) the function getObjectId() gives me //Array [ Object, Object, Object ].. clicking on object takes me to its data and it has $id as -K9jyc0K9i28h53d23Uw..

Is there any way to get the unique id for a particular element on clicking the button

I want this unique id to be shown for element on clicking a particular element/object in html.

Please help.

Answer 1

If your user object has the id property on it, you can just refer directly to that. You can pass it as a parameter from your ng-click directive:

<button ng-click="selectUser(user)">

and in your controller:

$scope.selectUser = function(user) {
    console.log(user); // should emit the user object.  is id a property?
}

If all of your objects use the same property, you can have a single function:

$scope.showObjectId = function(object) {
    alert(object.id);
}

Answer 2

You can show the id in the html like this (within the ng-repeat):

<td> {{ user.$id }} </td>

Or send it to the ng-click function (within the ng-repeat):

<button class="btn btn-warning" ng-click="getObjectId(user.$id)">Get Id</button> //Just send the id to the function
<button class="btn btn-warning" ng-click="getObjectId(user)">Get Id</button> //Send the etire user object to the function

And in you javascript you can use it like this:

$scope.getObjectId = function(user){ 
//If you only send the id to this function you can get the entire user object like this (it gives a $firebaseObject i think):
var user = $scope.userData.$getRecord(user);
//Here you can do anything with the user
//Update user data
$scope.UserData.$save(user);
//Remove user
$scope.UserData.$remove(user);
}