dynamically Pass javascript variable to angularJS function

Question

I want to dynamically pass only javascript variable to angular function. IS it possible as i can not pass scope variable in my scenarios.Please also see the code in js fiddle

http://jsfiddle.net/rahulrathore1986/udmcv/293/

 <div style="border:solid;color:red;Margin-bottom:4px;"> want to pass 
  only javascript variable to angular function. IS it possible to pass
JS variable as i can not pass scope variable in my scenarios <ul
 id="ulTabList" >

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

The Angular code is as below

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(workGroupTab);" ng-model="workGroupTab">Text of Li</li>'
    +'<input id="btnClose_4341" type="button" ng-model="workGroupTab" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose(workGroupTab)">');

  $compile(el)($scope);
  $("#ulTabList").append(el)
  }  
    $scope.fn_btnClose = function(v){
        console.log('closed button is'+ v);
    }

    $scope.OpenWorkGroupTab =function(workgroup){
     console.log('workgroup : ' + workgroup);
    }
})

Answer 1

My understanding is that you want the variable workGroupTabto be rendered correctly in ng-click="OpenWorkGroupTab(workGroupTab);".

You can do the following to achieve this:

// assign to a variable so the layout is correct
var workGroup = "OpenWorkGroupTab('"+ workGroupTab +"');";
// then add it within the ng-click element
var el = angular.element('<li ng-click="'+ workGroup +'" ng-model="workGroupTab">Text of Li</li>'
+'<input id="btnClose_4341" type="button" ng-model="workGroupTab" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose(workGroupTab)">');

JsFiddle

Answer 2

You are taking this more from jQuery approach rather than Angular's MVC approach.

Instead of specifying template in your javascirpt file, leverage the ng-repeat to dynamically render each of your li item automatically.

http://jsfiddle.net/rahulrathore1986/udmcv/293/

html

<div style="border:solid;color:red;Margin-bottom:4px;">
  want to pass only javascript variable to angular function. IS it passible as i can not pass scope variable in my scenarios
  <ul id="ulTabList">
    <li ng-repeat='item in list' ng-click="OpenWorkGroupTab(item);">Text of Li</li>
    <input type="button" ng-model="item" value="btn" style="margin-left:1px;" ng-click="fn_btnClose(item)">
  </ul>
</div>
<div style="margin-top:10px;">
  <input type="button" ng-click="Addli()" value="Create" />
</div>

JAVASCRIPT:

angular
  .module('my-app', [])
  .controller('AppController', function() {
    var workGroupTab = "TestA"
    $scope.list = [];
    $scope.Addli = function() {
      $scope.list.push({});
    }
    $scope.fn_btnClose = function(v) {
      console.log('closed button is' + v);
    }

    $scope.OpenWorkGroupTab = function(workgroup) {
      console.log('workgroup : ' + workgroup);
    }
  })