javascript - Compiling dynamically generated buttons in Angular -

i'm trying dynamically generate button in angular. on click, button needs call deleterow() function , pass in username. applicable username passed controller , resulting button code appears generated. however, button ends passing undefined deleterow() function. problem how i'm using $compile?

validationapp.controller('userscontroller', function ($scope, $compile, $http, $timeout){     $(document).on("click", ".open-confirm-dialog", function () {         var username = $(this).data('id');         var btnhtml = '<button class="btn btn-danger" data-title="delete" ng-click="deleterow(' + username + ')">delete</button>';         var temp = $compile(btnhtml)($scope);         angular.element(document.getelementbyid('deletebutton-dynamic')).append(temp);     });      $scope.deleterow = function(username){         alert(username); //this shows 'undefined' in pop-up         var request = $http({         method: "post",         url: "scripts/delete.php",         data: { un: username },         headers: { 'content-type': 'application/x-www-form-urlencoded' }     });      request.success(function() { });     location.reload(); }; 

html follows:

<div class="row" ng-controller="userscontroller">     <div class="table-responsive col-md-12" ng-show="filtereditems > 0">     <table id="users" class="table table-bordred table-striped">         <thead>             <th ng-click="sort_by('username');">username:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>             <th ng-click="sort_by('submitted_info');">submitted info.:&nbsp;<i class="glyphicon glyphicon-sort"></i></th>         </thead>         <tbody>             <tr ng-repeat="data in filtered = (list | orderby : predicate :reverse)">                 <td>{{data.username}}</td>                 <td>{{data.submitted_info}}</td>                 <td><a href="#confirmmodal" class="open-confirm-dialog" data-toggle="modal" data-id='{{data.username}}'><span class="glyphicon glyphicon-trash"></span></a></td>             </tr>         </tbody>     </table>      </div>         <div class="col-md-12" ng-show="filtereditems == 0">             <div class="col-md-12">                 <h4>no customers found</h4>             </div>         </div>         <div class="col-md-12" ng-show="filtereditems > 0">         <div pagination="" page="currentpage" on-select-page="setpage(page)" boundary-links="true" total-items="filtereditems" items-per-page="entrylimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>         </div>          <!-- confirm modal -->         <div id="confirmmodal" user-id="" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmmodal" aria-hidden="true">             <div class="modal-dialog">                 <div class="modal-content">                     <div class="modal-header">                         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                         <h4 class="modal-title" id="mymodallabel">confirm delete</h4>                     </div>                 <div class="modal-body">                 sure want delete user database?             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>                      <span id="deletebutton-dynamic"></span>                 <!--working hardcoded button                 <button class="btn btn-danger" data-title="delete" ng-click="deleterow('user1')">workingbutton</button>                 -->             </div>         </div>     </div> </div> 

angular assumes value passed deleterow part of expression, therefore checks scope key matches value of username. change ng-click expression wrapping concatenated username string in quotes. e. g. deleterow(\''+ username + '\')