title: Dynamic function call with angularjs
body: <p>I have an array of</p>
  
  <pre><code>invitationList = ["A","B","C","D"]
  </code></pre>
  
  <p>from this array, I need to form a list having a name of <strong>A/B/C/D</strong> with button of <strong>accept</strong>. While clicking this accept button, accept function should be invoked.</p>
  
  <p>I tried,</p>
  
  <pre><code> var list_Invitation='';
   list_Invitation="&lt;ul class='offline-invitation'&gt;";
   var i = 1;
      for(var index in invitationList)
          {
          i++;
          list_Invitation=list_Invitation+'&lt;li class="class_InvitationList"&gt;&lt;h5&gt;'+invitationList[index]+'&lt;/h5&gt;&lt;input type="button" class="accept-btn" value="Accept" ng-click="acceptInvitation(\''+invitationList[index]+'\', \'accept-btn'+i+'\');"/&gt;&lt;/li&gt;';
          }
              list_Invitation=list_Invitation+"&lt;/ul&gt;";
  
  
  $scope.acceptInvitation=function(name,id)
    {
        console.log('Invoked');
    }
  </code></pre>
  
  <p>List will be shown, but the function cannot be invoked while clicking the button.</p>
  
  <p>Can anyone help me to resolve this?</p>