how to include javascript file specific to each view angularjs

Question

The problem I am having is that the loadjs file doesn't always get loaded before I bind it to the grid. I have read other posts regarding using directives but I don't understand how to use them in my case.

The code should load a specific view each view in turn has a specific javascript file that needs to be loaded before the view is finally renered

So view 1 might be a datagrid with datagrid.js file dependancy and view2 is a listview with listview.js dependancy

Thanks.

Function MyCtrl1($scope) {
$scope.$on('$viewContentLoaded', function() {

     //Load file if not already loaded
    isloadjscssfile("js/model/gridmodel.js", "js")


  $("#grid").kendoGrid({
                    dataSource: getdatasource(),
                    pageable: true,
                    height: 400,
                    toolbar: ["create"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
                        { field: "UnitsInStock", title:"Units In Stock", width: "150px" },
                        { field: "Discontinued", width: "100px" },
                        { command: ["edit", "destroy"], title: " ", width: "210px" }],
                    editable: "inline"
                });
});

}

Answer 1

You can't. Angular does not load javascript parts from a template.

What you should do is to include them in your main application anyway. All of the controllers should be loaded while the main app is initiating. (This is where you put your npApp directive)