Develop Reference

Javascript code in main body is not working with angular template

I have designed an htm page which has javascript and all has worked well,
but when I tried to put some of the div sections of the page inside a template which would be read by
angularjs application all the element which require javascript to display properly were not working
properly or displaying the element properly.
I later discorvered that angular has its own jquery etc. But the problem is that I am using some
elements which are not custom made and making changes to the code may make the whole program fail.
What can I do to get all the sections to work properly?
This is the angular section
var app = angular.module("app",[]);
app.controller("controls",["$scope", function($scope){
}]);
app.directive("myTemplate", function(){
return{
templateUrl: "template_file_with_div_section.htm"
};
});
HTM SECTION
<div ng-controller="controls">
<div my-template></div>
</div>
Some of the sections are using datatable etc
some the scripts i am using are
<script src="angular/angular.js"></script>
1. jquery.min.js
2. tables/jquery-datatable.js
3. jquery-datatable/jquery.dataTables.js
4. jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js
5. jquery-datatable/extensions/export/dataTables.buttons.min.js
there are over fifty different jquery scripts
UPDATE
When i enter the template's url through http://url/#template_name
The template shows up in the web page so it shows that it works fine but there are sections within the template which would perform some operations (e.g. sorting etc) this sections relies on javascript which are in the main page.
These are the sections which are not working at all.
When I put the angular script after the table script. The template did not show up,
But when I put the angular script after the table script as shown above, the template showed up but the script where not working at all

It is little hard to guess what is exactly happening.
But, here are some things that you might want to consider:
Make sure you have defined ng-app in your HTML.
Also, the other part of the application (like you are saying sections) should come under your ng-app.
Make sure that all your scripts are added and loaded properly.
Each page has binding to certain controller or directive with appropriate template URL.
Hope that helps!

jQuery thumbnail grid in AngularJS

I'm attempting to use a thumbnail grid in my AngularJS application. I've set up a directive for the HTML template part, but am having trouble initializing the jQuery part that expands a tile on click.
I know this is a typical issue when attempting to use jQuery in Angular apps. The jQuery script is very simple, I just don't know how to make it work in Angular. The script:
<script>
$(function() {
Grid.init();
});
</script>
Thanks for any advice/help!
Edit:
Page is here: tinyurl.com/jgbrpd6. As you can see, if you click on one of the elements, nothing happens because the jQuery script is located in the HTML of the templateUrl file.
templateUrl file is here: tinyurl.com/zr9ylqf. As you can see, if you click on one of the elements, it behaves as expected, becuase it is now outside of the AngularJS app.

AngularJs and Jquery error in loaded div content

I'm working in a web, I need to load my div content using this jQuery function:
$('#mainPage').load($(this).attr('mainContent'));
In my index.php I have configured the directive ng-app=".MyApp" and also I'm using ng-controllers there and it works fine, but using some ng-controllers inside the loaded page in the #mainPage div it doesn't works fine, as a solution I have tryied:
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
and it loads correctly and then the controller is working fine, but if I load again the div space then Angular crash with the error:
Error: [ng:btstrpd] http://errors.angularjs.org/1.4.3/ng/btstrpd?p0=....
(that means angular is bootstapped)
I can't load the div's content using ng-includes directive because I shoud use jquery and javascript inside the loaded page, then I don't know how to solve this problem...
Thanks very much!!!

how to run Jquery Click function on ng-click in Angularjs

I am working on a mobile app where I am using MDL for app UI and Angualr js
I bought the theme from themeforest named "FAB".
I am using angular js to show the data from server using API's where I am displaying all the products which is coming from server.I want to run Add to Cart section on the page which has some in-built jquery applied to it. if I dont write Angualr js then my Jquery is working fine.
here is the link of my Page without Angular js
Link without Angular js ,
link with angualr js
I am new to angular js .. so it is something which is blocking jquery click event

While I'm creating plunker for the answer, I ran into the same problem.
But, It was solved by inserting app.js before </body> tag. I think it might be related with angular's inside operation.
Here are different plunkers(app.js in head, app.js in body)

Angular JS not working in subpages

I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.

I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization