title: Converting angularjs menu directives to support ui.router
body: <p>I found a nice hover menu implementation online. it works great for assigning hrefs. I wanted to convert it to work with ui.router states and sref.</p>
  
  <p>I added a href and sref value on the menu data object.</p>
  
  <p>Where it generates and compliled the html I changes {{node.href}} to "{{ $state.href(node.sref)}}"</p>
  
  <p>but the output generated the "{{ $state.href(node.sref)}}" appears just as I wrote it , it's not evaluating.</p>
  
  <p>Is this because in that context $state is not defined? If so how do I define it?</p>
  
  <p>If not can you tell me why it's not evaluating?</p>
  
  <p>My end goal was something like this:
  {{node.href ? node.href : $state.href(node.sref)}}</p>
  
  <p>and if node.href is truthy, it works, but if href is uncompiled, the expression shows up undefined... so I know it's trying to evaluate that expression... I converted it to just "$state.href(node.sref)" to simplify it...</p>
  
  <p>Also is there a way to see the errors generated during a $compile?</p>
  
  <p>Any help is greatly appreciated, I'm pretty new to Angular and there are a lot of voids in my knowledge, so please feel free to ask stupid questions to verify my base understanding of the problem, and explain with little words :) I probably need that.</p>
  
  <pre><code>var app = angular.module('defaultApp');
  app.controller('menuController', ['$scope', '$location', function ($scope, $location) {
              $scope.breadcrumbs = [];
              $scope.menu = [
                  {
                      text: 'HOME',
                      href: '\default.html',
                      children: [
                          { text: 'Default', href: '\default.html' }
                      ]
                  },
                  {
                      text: 'start',
                      //href: '\default.html',
                      sref: 'start',
                      children: [
                          {
                              text: 'search',
                              //href: '/manage-people',
                              sref: 'search',
                              children: [
                                  { text: 'search', sref: 'search' },
                                  { text: 'start', sref: 'start' }
                              ]
                          }
                      ]
                  },
                  { text: 'MY INFO', href: '/my-info', sref: 'search' }
              ];
      /* Directives */
      app.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) {
              return {
                  restrict: 'C',
                  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="{{$state.href(node.sref)}}"  target="{{node.target}}" &gt;{{node.text}}&lt;/a&gt;{{node.click}}&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);
                  }
              };
          }])
          .directive('subNavigationTree', ['$compile', function ($compile) {
              return {
                  restrict: 'E',
                  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 "{{ $state.href(node.sref)}}"  target="{{node.target}}" &gt;{{node.text}}&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();
                      }
                  }
              };
          }]);
  </code></pre>