SO - 19267979

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<div style="border:solid;color:red;Margin-bottom:4px;">
Click on Create Button to Generate the required li'sThe issue is that when there multiple Li  the corresponding is getting called multiple time
<ul id="ulTabList" >

</ul>
</div>
<div style="margin-top:10px;">
<input type="button" ng-click="Addli()" value="Create"/>
</div>

JavaScript

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope, $compile) {
var workGroupTab ="TestA"
$scope.Addli =function(){
    var el = angular.element('<li ng-click="OpenWorkGroupTab();">Text of Li</li>'
    +'<input id="btnClose_4341" type="button" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose()">');
    
  $compile(el)($scope);
  $("#ulTabList").append(el)
  }  
    $scope.fn_btnClose = function(){
        console.log('clicked'+ 'val');
    }
    
    $scope.OpenWorkGroupTab =function(){
     console.log('val2');
    }
})