Yeoman Mean.js generated custom AngularJS directive not working

Thank you for any help, I know this is probably a simple problem, but I've been working on it for a while and can't figure out what I'm doing wrong.

Contextual info
I'm trying to implement a simple custom directive for AngularJS. My web page is built using the Mean.js template. To create a custom directive for my Users module, I used the Yeoman generator by running this command,

yo meanjs:angular-directive compareTo

      

        
        
        
      

    

I then indicated that I would like to place the directive in my user module. This created a directory of directives with a sample custom directive. Here is my folder structure. http://imgur.com/SZvG706 (I'm not allowed to post images yet, sorry)

Problem
I understand that this could create an h1 attribute with the text "this is a compareTo directive" and also print the console message, but I can't see anything or get any errors in the console.

Code
Here is the generated compare directive file. The only thing I changed was the div in h1 in the template and adding the hi console 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 am trying to implement a directive with a 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!