Asynchronously load script in Angular SPA

I have an Angular application with directives throughout it. One directive build a mapbox map when called. For the to work, I currently load the mapbox CSS and JS when the app initially loads. This is not ideal because it slows down the initial page load, but the user may not even go to a view where this script is required.

So my question is if there is a way to asynchronously load a script (and possibly CSS) when a directive is called for the first time. After the first time, if the directive is used again in another view, it shouldn't load the script again. Is this also possible with angular-loader.js?

So my example setup looks like this so far:

View HTML

<ng-map></ng-map>

Directive

app.directive('ngMap', ['MapService', function(MapService){
  return {
    restrict: 'E',
    templateUrl: '/partials/map.html',
    link: function($scope, element, attrs){
      MapService.build();      
    }
  }
}]);

Service

app.service('MapService', [function(){

  this.build = function(){    

    //map bounds
    var southWest = L.latLng(54.04407014753034, -0.745697021484375),
        northEast = L.latLng(53.45698455620496, -2.355194091796875),
        bounds = L.latLngBounds(southWest, northEast);

    //build map object
    L.mapbox.accessToken = conf.mapbox.token;
    map.obj = L.mapbox.map('map', conf.mapbox.id, {
      maxBounds: bounds,
      zoomControl: false,
      minZoom: 11,
      attributionControl: false
    }).setView([53.80451586014786, -1.5477633476257324], 15, {
      pan: { animate: true },
      zoom: { animate: true } 
    });

  };

}]);

map.html

<div id="map"></div>