I have a button to load another page inside current page. and in that page I have a Angular js code. when the button clicked in the current page i want to load that Angular js inside specific div with classname "airlinename".my problem is when I click on the button the response shows Html contet. but I want to show the result of my angular that I defined it above ng-init.
for example it shows {{x.title}} instead of airline names that i defined them above.
this is my current page code :
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<button onclick="PostEndid(this)">button</button>
<span class="airlinename" >
</span>
<input value="1234" class="StartCityID" type="hidden">
</body>
<script type="text/javascript">
function PostEndid (y) {
$.ajax({
url: 'test-js.bc',
type: 'post',
data : {
StartCityID: $(".StartCityID").val(),
},
success:function(response){
$(y).closest(".airlinename").empty().html(response); }
});
}
</script>
</html>
and i have the below code inside the second page that i want to load :
<dl class="dropdown dropdown11 left_dromdown airlinename marg5 ng-scope" ng-app="" ng-init="airline1=[{ "title" : "Mahan Air" }, { "title" : "Qatar Airways" }]">
<dd>
<ul>
<li ><input type="text" ng-model="search9" /></li>
<li
onClick="routesearchairline(this)"
class="routecode_list"
ng-repeat="x in airline1 | filter : search9">{{x.title}}</li>
</ul>
</dd></dl>