Custom Directive in Angular
<p>Hello I have the following directive for a hamburger menu:</p>

<pre><code>angular.module('app.directives')
    .directive('hamburger', hamburger);

    // Injecting Dependencies
    hamburger.$inject = ['$rootScope', '$timeout'];

    // Directive's Function, Where All Code is Declared and Executed
    function hamburger($rootScope, $timeout) {
        return {
            restrict: 'E',
            scope: {
                open: '='
            },
            templateUrl: 'tpls/directives/hamburger.html',
            link: function (scope, elem, attr, ctrl) {

                scope.$watch('open', function(newValue, oldValue) {

                    if (newValue == true) {
                        $timeout(function () {
                            elem.addClass("open");
                        }, 2000);

                        console.log("This is true");
                    }
                    else {
                        $timeout(function () {
                            elem.removeClass("open");
                        }, 2000);

                        console.log("This is false");
                    }

                });


            }
        }
    }
</code></pre>

<p>This is the template:</p>

<pre><code>&lt;div&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>This is how I use it in my view:</p>

<pre><code>&lt;hamburger class="menu-btn2 pull-left" snap-toggle="left" open="vm.toggleMenu" ng-click="toggle()" ng-dblclick="doNothing()"&gt;&lt;/hamburger&gt;
</code></pre>

<p>Now I have a function in my view that adds a class to an element on click.  This opens a side menu.</p>

<p>Now when my side menu is open I want to change the icon of my menu by adding an "open" class.</p>

<p>On my directive I have an attribute named "open" which I bind to both my controller and my directive.  Inside my directive's <strong>link</strong> function I have a watch that is supposed to watch the value of the variable bound to "open" when it changes to true it should an a class "open" to the element when it changes to "false" it should remove the class "open" from the element.</p>

<p>I have tried everything so far but cannot seem to get this to work.  There are no errors shown in my terminal, I tried to do a <code>console.log()</code> in my $watch to see if it was actually detecting when the value changed but that didn't work either, nothing was logged in my console.</p>

<p>This is my toggle function:</p>

<pre><code>vm.toggleMenu = false;
vm.toggle = function () {
  vm.toggleMenu = !vm.toggleMenu;
};
</code></pre>