Angular - Directives and using Module

Question

After studying various different projects and reading as much documentation as I can handle, I've run into an issue with how to include directives in my app. The app is setup like the following:

app.js - just the top part

angular.module('ngDashboard', ['ngCookies','ngResource','ngDashboard.filters', 'ngDashboard.services', 'ngDashboard.directives'])

All of the modules work fine except (it is an app rewritten from an example) for the directives which don't work at all:

directives.js - The following does NOT work and doesn't execute the directive on the view:

angular.module('ngDashboard.directives', []).
  directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        compile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The following in the same directives.js file does work properly and the directive executes:

angular.module('ng').directive('funkyElement', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: 'isolate',
        template: '<div>gonna parse this: {{orig}} <br/>... and get this: {{obj}}</div>',
        //templateUrl: 'template.html',
        compile:function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var origElem = transclusionFunc(scope);
                var content = origElem.text();
                scope.orig = content;
                scope.obj = my_custom_parsing(content);
            };
        }
    };
});

The HTML is simple:

<funky-element>
    Parse me... come ooooon! Just parse meee!
</funky-element>

My question is, what is the proper way to include a set of directives and perhaps why the first example (using the ngDashboard.services) does not work.

Answer 1

It turns out that the app.js file I had was either cached so the directive dependency wasn't there or I had neglected to save it (both possible with weekend work and late nights). Since this issue was fixed after I made an update to app.js I'll mark this as resolved with the advice of:

1. Check the scripts console to make sure your files aren't cached
2. Turn off caching completely, or use the incognito mode.
3. Always make sure the ng-app is added to your document (wasn't the case but could help someone else)
4. Make sure you save your files
5. Drink more coffee when you are tired and learning a new programming language/framework.

Lastly with regards to Angular, I had not realized you could add directives to the ng module and they'd become available. I'm sure this isn't a best practice, but for testing and putting together quick code, it may come in handy.