Develop Reference

Angular module on dynamically created elements

i have a existing controller and template:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl">
<div id ="outputtablemodel_panel" ng-show="editMode">
</div>
</div>
it works perfectly. But now i need to delete the template from the project (which has a fix place in the DOM) and somehow make it appear dynamically when man a button click.
when i tried that with jQuery
$('<div id="outputTableforApp" ng-controller="OutputTableModelCtrl"><div id ="outputtablemodel_panel" ng-show="editMode">\n\
</div></div>').appendTo($('#div1'));
My Angular module didn't work at all. So i guess i need to register the module somehow again every time when someone presses the button, is that the case ? if so ,how could i do it ?

You can use ng-show so do this:
<div id="outputTableforApp" ng-controller="OutputTableModelCtrl" ng-show="showApp">
and when the button is clicked call a function (using ng-click) in your controller script that makes it that showApp is true(make sure you use $scope.showApp in the function).

How To Access Function From Outside AngularJS

I have absolutely never used AngularJS -
I am able to handle all parts of someone else's script - but am lost with a newb idea of accessing the functions outside of the Class? Or whatever it is called 0_o - I have tried to look this up - but I just get lost.
The script Im working on is like this:
app.controller("searchFormController", function($scope,$http){
$scope.getSomeDetails = function(filter){
alert("you are doing stuff in this function");
}
})
The function is typically called from a form outside of the script - like this:
<select id="transmissions" name="transmission" ng-model="transmission" ng-change="getSomeDetails(true)">
When the above form element is selected - the function getSomeDetails is called properly.
Now I simply want to call the same function with a text link instead.
I have tried:
<span onClick="getSomeDetails(true)">Get Details </span>
Not sure what I am doing wrong -
I just want to call the same function but using a text link?
Thanks for your help.

app.controller("searchFormController", function($scope,$http){
$scope.getSomeDetails = function(filter){
alert("you are doing stuff in this function");
};
});
Here searchFormController is the your angular function.So attached this function to html template with ng-controller attribute. functions and variable mentioned inside this searchFormController will be available to the template in which you have bind that function with ng-controller.
Your getSomeDetails function is in this searchFormController. So in html template where you wants to call this function before that you needs to bind the controller to it's parent element or to that element so that function scope is available where you needs to call.
Here you have to call function on the click of link so use ng-click. and call the function.
Your span tag should be like this.
<span ng-controller="searchFormController" ng-click="getSomeDetails(true)">Get Details </span>

<span ng-click="getSomeDetails(true)">Get Details</span>

ng-click Vs click event

I am working on a website based on angular js.
Currently, I have written about 5000 line code in angular js.
So I have to make some changes without touching my angular js.
I want something like this:
$(document).on('click','#buttonid',function(){
//performing some necessary task then call ng-click method
ngclickmethod();
});
HTML Code:
<a ng-click="ngclickmethod()" id="buttonid">
Please advise how can I achieve that.
Many Thanks

So it looks like you are trying to call an angular function outside of angular. Try this..
angular.element(document.getElementById('yourControllerElementID')).scope().ngclickmethod();
this will call the method you want. Be sure the controller element ID is the controller that contains the ngclickmethod function

Load template on click angular

Have tried loading the template on click of the button but some where approach is wrong templates are not loading.
Here adding the tried plunker:
Plunker
Can anyone let me know where had gone wrong.

I think problem is following:
You haven't called the function. you have to say cClick().
You said:-
<button ng-model='template' ng-click='cClick'>Click</button>
try this:-
<button ng-model='template' ng-click='cClick()'>Click</button>

Javascript function is not getting called onclick of hx:commandExButton

When I click on the hx:commandExButton the Javascript function should get called, but it is not getting called. The Javascript function is as follows:
function test() {
alert('ss');
return "true";
}
The hx:commandButton is as follows:
<hx:commandExButton
type="submit"
value="Search"
styleClass="action2" id="searchButton"
onclick="return test();"
action="#{pc_WorkInProgressUserGrid.doSearchButtonAction}"
immediate="true">
</hx:commandExButton>
Any suggestion would be helpful.

First step would be to check the generated HTML output to verify if it looks right. It may for instance happen that the hx:commandExButton itself didn't take the onclick attribute value correctly into account. As a test, you could try to get rid of it and use the standard JSF h:commandButton instead.
Further I also recall something about a crazy <hx:scriptCollector> tag which you are supposed to wrap the piece of JSF code with whenever you'd like to use Javascript in combination with IBM Faces Client components.
E.g.
<hx:scriptCollector id="someid">
<hx:form>
<hx:commandExButton />
</hx:form>
</hx:scriptCollector>

I don't know JSF, but it's immediately obvious that you have omitted a " after true, and also a >
Are those ** supposed to be there? And writing method before a function is definitely not part of standard JavaScript.