how to include javascript file specific to each view angularjs

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"
                });
});

}

If you want to this in directive, you can do something like this

.directive('require', function(){
    return{
      restrict: 'E',
      scope: {
         scriptSrc: '@'
      },
      template:'<script type="text/javascript" src="{{ scriptSrc }}"></script>',
      link: function(scope, elm, attr){
        ....
      }
      replace: true
    }
});

HTML :

<require script-src="/foo.js">
<require script-src="/bar.js">

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)

Try something like this (it could probably be "more Angular", but for the moment it works for me): 

angular.module('MyApp').controller('MyCtrl1', ['$scope', function ($scope) {

    window.initialize = function() {
        // code to execute after your JS file referenced in the loadScript function loads
    }

    var loadScript = function () {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://www.myserver.com/file.js?callback=initialize';
        document.body.appendChild(script);
    }

    $scope.$on('$viewContentLoaded', function () {
        loadScript();
    });

}]);