/*
Behavior:
When I am on mysite.com/path/anything/else, path.html is included (mysite.com/foo includes foo.html)
Before including the appropriate html file, load a js file by the same name (/path so path.js). This file contains the controller. Now load html file and give it the appropriate controller (/path so pathCtrl)
*/

//in the main view - USAGE
<vc-include src="contentFile"></vc-include>

//in my app config
myApp.$controllerProvider = $controllerProvider; //cache this so I can register my controller

//in my main controller - determine the file (route)
    $scope.$on('$locationChangeStart', function(event, target) {
      var base = document.getElementsByTagName('base')[0].href;
      var page =  target.replace(base, '').split('/')[0];
      if (!page) { page = 'home'; }
      $scope.contentFile = 'partials/'+page+'.html';
    });

//in the dynamically loaded controller js file
myApp.$controllerProvider.register('myCtrl', function($scope) { });

/* Here's my version of ng-include that makes this work. I had to replace $http with jQuery and therefore removed the $templateCache stuff. Other than updating the name to vc-include in a few place, my changes start at "var getInclude"   */

myApp.directive('vcInclude', ['$http', '$templateCache', '$anchorScroll', '$compile', '$animator',
      function($http, $templateCache, $anchorScroll, $compile, $animator) {
        return {
          restrict: 'ECA',
          terminal: true,
          compile: function(element, attr) {
            var srcExp = attr.vcInclude || attr.src,
                onloadExp = attr.onload || '',
                autoScrollExp = attr.autoscroll;

            return function(scope, element, attr) {
              var animate = $animator(scope, attr);
              var changeCounter = 0,
                  childScope;

              var clearContent = function() {
                if (childScope) {
                  childScope.$destroy();
                  childScope = null;
                }
                animate.leave(element.contents(), element);
              };

              scope.$watch(srcExp, function vcIncludeWatchAction(src) {
                var thisChangeId = ++changeCounter;

                var getInclude = function() { //CALLBACK AFTER GETTING CONTROLLER!
                  $.ajax({
                    url: src,
                    success: function(response) {
                      if (thisChangeId !== changeCounter) { return; }
                      if (childScope) { childScope.$destroy(); }
                      childScope = scope.$new();
                      animate.leave(element.contents(), element);
                      var controller = src.replace('partials/', '');
                      controller = controller.replace('.html', 'Ctrl');
                      var contents = $('<div ng-controller"'+controller+'">').html(response).contents();
                      animate.enter(contents, element);
                      $compile(contents)(childScope);
                      childScope.$emit('$includeContentLoaded');
                      scope.$eval(onloadExp);
                    },
                    error: function() {
                      if (thisChangeId === changeCounter) clearContent();
                    }
                  });
                };

                if (src) { //GET CONTROLLER
                  var controllerSrc = src.replace('.html', '.js');
                  $.ajax({
                    url: controllerSrc,
                    success: getInclude,
                    error: getInclude
                  })
                }
                else { clearContent(); }
              });
            };
          }
        };
      }]);