I am working with AngularJs and php and i am facing problem when i have to load content from some other page then AngularJs stops working.
Here is some sample code to display my scenario.
main-page.php
<div id="form-section">
<button id="load_form">Load Form</button>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#load_form", function() {
$.ajax({
methond: 'GET',
url: 'load-form.php',
success: function(resp) {
$("#form-section").html(resp);
}
});
});
</script>
load-form.php
<form ng-app="myApp" ng-controller="myCtrl">
{{ textOne }}
<input type="text" ng-model="textOne">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.textOne = "John";
});
</script>
if i put <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> in load-form.php and load it directly in browser then AngularJs works there fine. But when i load it through Ajax in main page then my AngularJs code stops working
{{ textOne }}in my page instead of binded data.