Yeoman Mean.js generated custom AngularJS directive not working

Question

thank you in advance for any help, I know this is likely a simple issue but I have been working on it for sometime and can't figure out what I'm doing wrong.

Contextual Information
I am trying to implement a simple custom directive for AngularJS. My webpage is built using the Mean.js boilerplate. To generate a custom directive for my Users module I utilized the Yeoman generator by performing this command,

yo meanjs:angular-directive compareTo

I then specified that I would like the directive place in my users module. This generated a directives directory with a sample custom directive. Here is my folder structure. https://i.sstatic.net/gNleu.jpg (I am not allowed to post images yet, sorry)

The Problem
My understanding is that this could should create an h1 attribute with the text "this is the compareTo directive" and also print a console message, yet I see nothing and receive no errors in the console.

The Code
Here is the generated compare-to directive file. The only thing I changed was div to h1 in the template and added the console hi message.

'use strict';

angular.module('users').directive('compareTo', [
    function() {
        return {
            template: '<h1></h1>',
            restrict: 'E',
            link: function postLink(scope, element, attrs) {
                // Compare to directive logic
                // ...
                console.log('hi');
                element.text('this is the compareTo directive');
            }
        };
    }
]);

This is my signup.client.view.html file where I try to implement the directive with the compare-to html tag.

<section class="row" data-ng-controller="AuthenticationController">
    <h3 class="col-md-12 text-center">Sign up with you email</h3>
    <compare-to></compare-to>
    <div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
        <form name="userForm" data-ng-submit="signup()" class="signin form-horizontal" novalidate autocomplete="off">
            <fieldset>
                <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" required id="firstName" name="firstName" class="form-control" data-ng-model="credentials.firstName" placeholder="First Name">
                </div>
                <div class="form-group">
                    <label for="lastName">Last Name</label>
                    <input type="text" id="lastName" name="lastName" class="form-control" data-ng-model="credentials.lastName" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="organization">Organization Name</label>
                    <input type="text" id="organization" name="organization" class="form-control" data-ng-model="credentials.organization" placeholder="Organization Name">
                </div>
                <div class="form-group">
                    <label for="position">Position Title</label>
                    <input type="text" id="position" name="position" class="form-control" data-ng-model="credentials.position" placeholder="Position within organization">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" class="form-control" data-ng-model="credentials.email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" class="form-control" data-ng-model="credentials.username" placeholder="Username">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" class="form-control" data-ng-model="credentials.password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="confirmPassword">Confirm Password</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" data-ng-model="confirmPassword" compare-to="credentials.password" placeholder="Confirm Password">
                </div>
                <div class="text-center form-group">
                    <button type="submit" class="btn btn-large btn-primary">Sign up</button>&nbsp; or&nbsp;
                    <a href="/#!/signin" class="show-signup">Sign in</a>
                </div>
                <div data-ng-show="error" class="text-center text-danger">
                    <strong data-ng-bind="error"></strong>
                </div>
            </fieldset>
        </form>
    </div>
</section>

Thanks again!

Answer 1

So the problem was really silly. All I did to fix it was close my Node server instance and rerun grunt, I assumed I didn't need to do this because mean.js automatically recompiles every time you make a change. But I guess sometimes you need to restart it.