title: Angular error i dont understand?
body: <p>I am trying to build the Menu that is here:</p>
  
  <p><a href="http://jsfiddle.net/1vgcs4we/" rel="nofollow noreferrer">http://jsfiddle.net/1vgcs4we/</a></p>
  
  <p>However when i implement it into my project i get the following error message:</p>
  
  <pre><code>Syntax Error: Token 'node.click' is unexpected, expecting [:] at column 3 of the expression [{{node.click}}] starting at [node.click}}].
  </code></pre>
  
  <p>The result i get is i can see the menu item names but when i hover over them i receive an empty menu box?</p>
  
  <p>Here is my 2 Directives with the HTML as well:</p>
  
  <pre><code>app.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) {
      return {
          restrict: 'C', //Element
          scope: true,
          link: function (scope, element, attrs) {
              scope.selectedNode = null;
  
              scope.$watch(attrs.menuData, function (val) {
  
                  var template = angular.element('&lt;ul id="parentTreeNavigation"&gt;&lt;li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active &amp;&amp; node.active==true, \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" &gt;{{node.text}}&lt;/a&gt;&lt;sub-navigation-tree&gt;&lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;');
  
                  var linkFunction = $compile(template);
                  linkFunction(scope);
                  element.html(null).append(template);
  
              }, true);
          }
      };
  }]);
  app.directive('subNavigationTree', ['$compile', function ($compile) {
      return {
          restrict: 'E', //Element
          scope: true,
          link: function (scope, element, attrs) {
              scope.tree = scope.node;
  
              if (scope.tree.children &amp;&amp; scope.tree.children.length) {
                  var template = angular.element('&lt;ul class="dropdown "&gt;&lt;li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeId + '}}  ng-class="{active:node.active &amp;&amp; node.active==true, \'has-dropdown\': !!node.children &amp;&amp; node.children.length}"&gt;&lt;a ng-href="{{node.href}}" ng-click="{{node.click}}" target="{{node.target}}" ng-bind-html-unsafe="node.text"&gt;&lt;/a&gt;&lt;sub-navigation-tree tree="node"&gt;&lt;/sub-navigation-tree&gt;&lt;/li&gt;&lt;/ul&gt;');
  
                  var linkFunction = $compile(template);
                  linkFunction(scope);
                  element.replaceWith(template);
              } else {
                  element.remove();
              }
          }
      };
  }]);
  
  app.controller('HeaderController', ['$scope', '$location', function ($scope, $location) { 
      $scope.breadcrumbs = [];
      $scope.menu = [{
          text: 'HOME',
          href: '/app/index.html',
          children: [{
              text: 'MANAGE Dashboard',
              href: '/dashb'
          }]
      }, {
          text: 'MANAGE',
          href: '/manage',
          children: [{
              text: 'MANAGE PEOPLE',
              href: '/manage-people',
              children: [{
                  text: 'MANAGE STAFF',
                  href: '/manage-staff'
              }, {
                  text: 'MANAGE CLIENTS',
                  href: '/manage-clients'
              }]
          }]
      }, {
          text: 'REPORTS',
          href: '/reports',
          children: [{
              text: 'REPORT NUMERO UNO',
              href: '#'
          }, {
              text: 'REP NUMERO 2',
              href: '#',
              children: [{
                  text: 'Third Tier',
                  href: '#'
              }, {
                  text: 'Another Third Tier',
                  href: '#',
                  children: [{
                      text: 'SUB SUB NAV',
                      href: '#'
                  }]
              }]
          }]
      }, {
          text: 'MY INFO',
          href: '/my-info'
      }, ]
  
  
  }]);
  
  &lt;div class="row"&gt;
  &lt;div class="large-12 columns"&gt;
  
     &lt;nav class="nav-menu" menu-data="menu"&gt;&lt;/nav&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/UgLgX.png" alt="enter image description here"></p>